Code blocks
Syntax highlighting, titles, and multi-file code examples.
Fenced code blocks are automatically syntax-highlighted using Shiki with dual themes (light and dark).
Use triple backticks with a language identifier:
```javascript
const greeting = "Hello, world!";
console.log(greeting);
```Add a filename or label with the title attribute:
```typescript title="src/config.ts"
export const config = {
name: "my-project",
version: "1.0.0",
};
```Shiki supports over 300 languages, including: javascript, typescript, python, go, rust, bash, json, yaml, mdx, sql, css, html, and many more.
Use the CodeGroup component to show multiple related code blocks with tabbed navigation:
<CodeGroup>
```bash title="npm"
npm install blodemd
```
```bash title="pnpm"
pnpm add blodemd
```
```bash title="yarn"
yarn add blodemd
```
</CodeGroup>Tabs are automatically labeled from the title attribute. If no title is set, the language name is used.
Use single backticks for inline code: `blodemd push` renders as blodemd push.