# Code Blocks

Author syntax-highlighted code blocks, titles, highlights, and command examples.

Dahlia renders fenced code blocks with Expressive Code by default. Use this page
for day-to-day authoring patterns. See
[Expressive Code](/docs/references/expressive-code/) for advanced markers,
diffs, line numbers, and integration options.

## Basic Syntax

Use triple backticks and include a language name.

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

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

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

## Titles And Frames

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

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

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

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

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

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

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

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

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

## Highlighted Lines

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

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

```json {2,5-7} title="theme.config.json"
{
  "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.

```sh
npm install @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 ...`.

```sh
npm run dev
```

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

```sh
pip install httpx pydantic
```

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

```ts
dahlia({
  markdown: {
    packageManagerTabs: false,
  },
})
```

## Word Wrap

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

````md
```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.'
```
````

```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.'
```