Code Block

For isolated previews, theme switching, and sandbox editing, open the Code Block playground on holydocs.com .

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
```javascriptconst docs = await fetch("/api/docs");const data = await docs.json();console.log(data);```

With Title

Code block with a filename title.

typescript
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
```bashnpm 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
```javascriptconst 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

More

• Interactive playground: Code Block on holydocs.com
• Component library index: /components