# Code Blocks

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

Lotus 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
```ts title="src/theme.config.ts"
export default defineLotusConfig({
  docsBase: '/docs',
})
```
````

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

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

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

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

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

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

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

```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
lotus({
  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 = 'Lotus is an Astro documentation theme with configurable navigation, sidebars, appearance tokens, MDX components, and Expressive Code integration.'
```
````

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