Code Blocks

Lotus 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.

Titles And Frames

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

```ts title="src/theme.config.ts"
export default defineLotusConfig({
  docsBase: '/docs',
})
```

export default defineLotusConfig({
  docsBase: '/docs',
})

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

```sh title="Install Lotus"
pnpm add @prosefly/astro-theme-lotus
```

pnpm add @prosefly/astro-theme-lotus

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.

```ts {2,5-7} title="src/theme.config.ts"
export default defineLotusConfig({
  docsBase: '/docs',
  appearance: {
    accent: 'indigo',
    gray: 'neutral',
    radius: 'medium',
  },
})
```

export default defineLotusConfig({
  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-lotus

npm install @prosefly/astro-theme-lotus

yarn add @prosefly/astro-theme-lotus

bun add @prosefly/astro-theme-lotus

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.

lotus({
  packageManagerTabs: false,
})

Word Wrap

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

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

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