Dahlia
输入关键词搜索文档。

Expressive Code

Reference advanced code block markers, diffs, line numbers, and configuration.

查看 Markdown在 ChatGPT 中打开在 Claude 中打开

Dahlia enables Expressive Code by default. Use this reference when a page needs more than a basic fenced code block.

Configuration

Disable Expressive Code entirely when a site should use Astro’s built-in Shiki renderer instead.

ts
dahlia({
  markdown: {
    expressiveCode: false,
  },
})

Pass Expressive Code options through the Dahlia integration when you need to change the default themes or block behavior.

ts
dahlia({
  markdown: {
    expressiveCode: {
      themes: ['github-light', 'github-dark'],
      defaultProps: {
        wrap: true,
      },
    },
  },
})

Inserted And Deleted Lines

Use ins={...} and del={...} for changed lines. Plain {...} remains a neutral highlight.

md
```json del={4} ins={5} {7} title="theme.config.json"
{
  "docsBase": "/docs",
  "appearance": {
    "accent": "blue",
    "accent": "emerald",
    "gray": "neutral"
  },
  "pageActions": []
}
```
theme.config.json
{
  "docsBase": "/docs",
  "appearance": {
    "accent": "blue",
    "accent": "emerald",
    "gray": "neutral"
  },
  "pageActions": []
}

Inline Markers

Mark text inside a line with quoted strings or regular expressions. Prefix the marker with ins=, del=, or mark= to choose the marker type.

md
```json "docsBase" ins='"/docs"' del='"/documentation"' title="theme.config.json"
{
  "docsBase": "/docs",
  "previousBase": "/documentation"
}
```
theme.config.json
{
  "docsBase": "/docs",
  "previousBase": "/documentation"
}

Regular expressions are useful when the exact value changes across examples.

md
```ts /variant: '[^']+'/ title="src/site-nav.ts"
export const siteNav = [
  { label: 'Dashboard', href: '/app/', variant: 'soft' },
  { label: 'Login', href: '/login/', variant: 'outline' },
]
```
src/site-nav.ts
export const siteNav = [
  { label: 'Dashboard', href: '/app/', variant: 'soft' },
  { label: 'Login', href: '/login/', variant: 'outline' },
]

Diff Blocks

Use the diff language for compact before-and-after examples.

md
```diff
- "accent": "blue"
+ "accent": "emerald"
```
diff
"accent": "blue"
"accent": "emerald"

Use lang="..." when you want diff markers and syntax highlighting for the underlying language.

md
```diff lang="json" title="theme.config.json"
 {
-  "accent": "blue"
+  "accent": "emerald"
 }
```
theme.config.json
{
  "accent": "blue"
  "accent": "emerald"
}

Line Numbers

Dahlia includes Expressive Code’s line number plugin, but keeps line numbers off by default. Add showLineNumbers to a block when line references matter.

md
```ts showLineNumbers title="src/content.config.ts"
import { docsLoader } from '@prosefly/astro-theme-dahlia/content';
import { defineCollection } from 'astro:content';


const docs = defineCollection({
  loader: docsLoader(),
});


export const collections = { docs };
```
src/content.config.ts
import { docsLoader } from '@prosefly/astro-theme-dahlia/content';
import { defineCollection } from 'astro:content';


const docs = defineCollection({
  loader: docsLoader(),
});


export const collections = { docs };

Use startLineNumber for snippets taken from the middle of a file.

md
```json showLineNumbers startLineNumber=24 {27} title="theme.config.json"
  "appearance": {
    "accent": "indigo",
    "gray": "neutral",
    "radius": "medium"
  },
```
theme.config.json
  "appearance": {
    "accent": "indigo",
    "gray": "neutral",
    "radius": "medium"
  },

Hanging Indent

Use hangingIndent with wrap to keep wrapped lines easier to scan.

md
```ts wrap hangingIndent=2 title="src/sidebar.ts"
export const sidebar = [{ label: 'Guides', items: [{ label: 'Getting Started', items: ['overview', 'installation', { label: 'Configuration', items: [{ autogenerate: { directory: 'configuration' } }] }] }] }]
```
src/sidebar.ts
export const sidebar = [{ label: 'Guides', items: [{ label: 'Getting Started', items: ['overview', 'installation', { label: 'Configuration', items: [{ autogenerate: { directory: 'configuration' } }] }] }] }]

最后更新于 2026年8月24日

贡献者