Code Blocks

Updated Apr 28, 2026

Fenced code blocks are syntax-highlighted with Shiki using catppuccin themes. Each code block includes a word wrap toggle button that switches between horizontal scrolling and wrapped lines.

Titles

Add a filename or title to code blocks:

```typescript title="livemark.config.ts"
import { defineConfig } from "livemark"
```

Renders as:

import { defineConfig } from "livemark"

export default defineConfig({
  articles: { include: "docs/*.md" },
})

Line Highlighting

Highlight specific lines with {line,range} syntax in the meta string or // [!code highlight] comments inside the code block.

Using meta syntax:

```typescript {2,4-6}
const a = 1
const b = 2
```

Renders as:

const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6

Using comment syntax (// [!code highlight]):

```typescript
const greeting = "hello"
const target = "world"
```

Renders as:

const greeting = "hello"
const target = "world"

Comment annotations are removed from the rendered output. Block comment syntax /* [!code highlight] */ is also supported.

Word Highlighting

Highlight all occurrences of a word with {word:TERM} syntax:

```typescript {word:config}
const config = loadConfig()
export default config
```

Renders as:

const config = loadConfig()
export default config

Line Numbers

Display line numbers alongside code with lineNumbers:

```typescript lineNumbers
const a = 1
const b = 2
```

Renders as:

const a = 1
const b = 2
const c = 3

Start numbering from a specific line with lineNumbers=N:

```typescript lineNumbers=5
const a = 1
const b = 2
```

Renders as:

const a = 1
const b = 2
const c = 3

Diff Lines

Mark lines as added or removed using // [!code ++] and // [!code --]:

```typescript
const old = "removed"
const next = "added"
```

Renders as:

const old = "removed"
const next = "added"

Focus Lines

Dim all other lines except the focused ones with // [!code focus]:

```typescript
const a = 1
const b = 2
const c = 3
```

Renders as:

const a = 1
const b = 2
const c = 3

Error and Warning

Mark lines as errors or warnings with // [!code error] and // [!code warning]:

```typescript
const valid = "ok"
const invalid = null!
const risky = getValue() 
```

Renders as:

const valid = "ok"
const invalid = null!
const risky = getValue() 

Collapsible Code

Limit the visible height of long code blocks with maxLines=N. An "Expand" button reveals the full code:

```typescript maxLines=3
const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6
```

Renders as:

const a = 1
const b = 2
const c = 3
const d = 4
const e = 5
const f = 6

Language Icons

Code blocks automatically display a language icon in the title bar when a title is present. Supported languages include TypeScript, JavaScript, React, Python, Rust, and shell.

const greeting = "hello"

greeting = "hello"

let greeting = "hello";

TypeScript Support

Add twoslash to a TypeScript code block to enable inline type information. Hover over highlighted identifiers to see their types:

```typescript twoslash
const greeting = "hello"
//    ^?
```

Renders as:

const 
const greeting: "hello"greeting = "hello"

Use // @errors: 2304 to showcase expected errors:

const const x: anyx = unknown_var
Cannot find name 'unknown_var'.

NPM Commands

Write npm commands and get automatic tabs for all package managers:

```npm
npm install livemark
```

Renders as:

npm install livemark