Using Expressive Code

Sidey uses Expressive Code for syntax highlighting. It works out of the box — just write a fenced code block in your markdown and it gets highlighted automatically.

Basic usage

Wrap your code in triple backticks and specify the language:

```ts
const greeting = "Hello, world!"
console.log(greeting)
```

You can also add a title to the code block:

```ts title="src/utils/greeting.ts"
const greeting = "Hello, world!"
console.log(greeting)
```

Line numbers

Line numbers are disabled by default. Enable them per block with showLineNumbers:

1
```ts showLineNumbers
2
const a = 1
3
const b = 2
4
const c = a + b
5
```

Line highlighting

You can highlight specific lines to draw attention to them:

```ts {2-3}
const a = 1
const b = 2
const c = a + b
```

Or highlight a single line:

```ts {2}
const a = 1
const b = 2
const c = a + b
```

Collapsible sections

Long code blocks can be collapsed to keep the page readable. Sidey uses collapsible-auto by default, which collapses sections automatically.

Mark a range of lines as collapsible with collapse:

```ts collapse={2-4}
3 collapsed lines
// This line is visible
const a = 1
const b = 2
const c = a + b
// This line is visible too
```

Combining features

All features can be combined in a single block:

1
```ts title="src/utils/math.ts" showLineNumbers {3} collapse={5-8}
2
// Math utilities
3
const add = (a: number, b: number) => a + b
4
const subtract = (a: number, b: number) => a - b
4 collapsed lines
5
const multiply = (a: number, b: number) => a * b
6
const divide = (a: number, b: number) => {
7
  if (b === 0) throw new Error("Cannot divide by zero")
8
  return a / b
9
}
10
```

This page covers what is available in Sidey out of the box. Expressive Code has a lot more to offer, visit the Expressive Code documentation for the full list of features and options.