Code Blocks

Dahlia renders fenced code blocks with Expressive Code by default. Use this page for day-to-day authoring patterns. See Expressive Code for advanced markers, diffs, line numbers, and integration options.

Basic Syntax

Use triple backticks and include a language name.

```ts
export const enabled = true;
```

export const enabled = true;

Common language names include ts, tsx, js, astro, css, html, json, md, mdx, sh, and bash.

Mermaid Diagrams

A fenced block with the mermaid language is a diagram, not a highlighted code sample. Dahlia renders it to static SVG during the build:

```mermaid title="Release flow"
flowchart LR
  Write[Write docs] --> Check[Run checks]
  Check --> Build[Build site]
  Build --> Deploy[Deploy]
```

See the Mermaid reference for the six supported diagram families, full examples, accessibility, styling, configuration, and build-error guidance.

Titles And Frames

Add title to show a file name in an editor-style frame.

```json title="theme.config.json"
{
  "docsBase": "/docs"
}
```

{
  "docsBase": "/docs"
}

Shell languages render as terminal frames automatically. You can still add a custom title.

```sh title="Install Dahlia"
pnpm add @prosefly/astro-theme-dahlia
```

pnpm add @prosefly/astro-theme-dahlia

Use frame="none" when a snippet should stay minimal.

```ts frame="none"
export const bare = true;
```

export const bare = true;

Highlighted Lines

Use {line} or {start-end} to mark important lines. Multiple selectors can be combined with commas.

```json {2,5-7} title="theme.config.json"
{
  "docsBase": "/docs",
  "appearance": {
    "accent": "indigo",
    "gray": "neutral",
    "radius": "medium"
  }
}
```

{
  "docsBase": "/docs",
  "appearance": {
    "accent": "indigo",
    "gray": "neutral",
    "radius": "medium"
  }
}

Package Manager Tabs

Shell code blocks that contain npm package-manager commands are converted to synced package-manager tabs automatically.

pnpm add @prosefly/astro-theme-dahlia

npm install @prosefly/astro-theme-dahlia

yarn add @prosefly/astro-theme-dahlia

bun add @prosefly/astro-theme-dahlia

The transform also handles related npm commands in the same block, such as npm run dev, npm create ..., npm dlx ..., and npx ....

pnpm dev

npm run dev

yarn dev

bun dev

Python install commands are converted to synced pip, uv, poetry, and pdm tabs.

pip install httpx pydantic

uv add httpx pydantic

poetry add httpx pydantic

pdm add httpx pydantic

Disable automatic package-manager tabs when you want npm or pip commands to render as plain code blocks.

import proseflyComponents from '@prosefly/astro-components/integration';

proseflyComponents({
  markdown: {
    packageManagerTabs: false,
  },
})

Add this integration next to dahlia(); Dahlia detects it and skips its own default Astro Components registration.

Word Wrap

Use wrap for long lines that should stay inside the content column.

```ts wrap title="src/copy.ts"
export const description = 'Dahlia is an Astro documentation theme with configurable navigation, docs navigation, appearance tokens, MDX components, and Expressive Code integration.'
```

export const description = 'Dahlia is an Astro documentation theme with configurable navigation, docs navigation, appearance tokens, MDX components, and Expressive Code integration.'