> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Block

Fenced code blocks with syntax highlighting, language labels, and copy buttons.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Code Block playground on holydocs.com](https://holydocs.com/components/code-block).

## When to use

Use this component when source needs more context than a plain fenced block can provide, or when multiple code representations should stay synced.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### JavaScript

Basic JavaScript example.

```javascript
const docs = await fetch("/api/docs");
const data = await docs.json();
console.log(data);
```

~~~mdx
```javascript
const docs = await fetch("/api/docs");
const data = await docs.json();
console.log(data);
```
~~~

### With Title

Code block with a filename title.

```typescript title="config.ts"
import { defineConfig } from "holydocs";

export default defineConfig({
  name: "My Docs",
  theme: "mint",
});
```

~~~mdx
```typescript title="config.ts"
import { defineConfig } from "holydocs";

export default defineConfig({
  name: "My Docs",
  theme: "mint",
});
```
~~~

### Shell

Terminal command.

```bash
npm install holydocs
```

~~~mdx
```bash
npm install holydocs
```
~~~

## Props

This component has no configurable props. Use its child content to shape the output.

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
```javascript
const docs = await fetch("/api/docs");
const data = await docs.json();
console.log(data);
```
~~~

## Tips

- Lead with the most likely copy target. If a reader has to switch tabs or trim lines every time, the block is doing too much.
- Optimize for copy-paste reliability. Labels, tabs, and annotations should help readers choose the right snippet without modifying it first.
- Keep examples small enough to scan but realistic enough to survive first use in a real project.

## Related Components

**[CodeGroup](/components/code-group)**

Tabbed multi-language code block for showing the same snippet in several programming languages.
**[Mermaid](/components/mermaid)**

Create flowcharts, sequence diagrams, Gantt charts, and other visualizations from text using Mermaid syntax.
**[Terminal](/components/terminal)**

Animated terminal replay with character-by-character typing for CLI tutorials and demos.

## More

- Interactive playground: [Code Block on holydocs.com](https://holydocs.com/components/code-block)
- Component library index: [/components](/components)