Code Blocks

Code blocks are powered by Expressive Code. All features are configured via the opening fence's meta string.

Filename & frames

```ts title="greet.ts"
function greet(name: string) {
  return `Hello, ${name}!`
}
```

Use frame="terminal" to render a terminal frame instead of an editor frame, or frame="none" to remove the frame entirely.

Line markers

Highlight lines with {n}, ranges with {n-m}, or mark insertions and deletions:

```ts {1} ins={3} del={2}
const name = "world"
console.log("Hello, world!")
console.log(`Hello, ${name}!`)
```

Inline text markers

Mark specific text with quoted strings or regular expressions:

```ts "name" ins="greet" del="hello"
function hello(name: string) {
  return `Hello, ${name}!`
}
```

Diff

Use diff as the language with +/- prefixes, combined with lang to keep syntax highlighting:

```diff lang="ts"
- function hello() {
+ function greet(name: string) {
-   return "Hello, world!"
+   return `Hello, ${name}!`
  }
```

Collapsible sections

```ts collapse={1-5}
// lots of boilerplate...
import { foo } from "foo"
import { bar } from "bar"
import { baz } from "baz"

// the interesting part
export function main() {}
```

Line numbers

```ts showLineNumbers
function greet(name: string) {
  return `Hello, ${name}!`
}
```

Word wrap

```ts wrap
// a very long line that would otherwise scroll horizontally...
```

For the full feature reference see expressive-code.com.