Highlight

Highlight is powered by Shiki and prerendered to static HTML during build.

Demo

Rust
use std::future::Future;async fn map_concurrent<T, U, F, Fut>(items: Vec<T>, f: F) -> Vec<U>where    F: Fn(T) -> Fut,    Fut: Future<Output = U>,{    futures::future::join_all(items.into_iter().map(f)).await}

Markdown
```rustuse std::future::Future;async fn map_concurrent<T, U, F, Fut>(items: Vec<T>, f: F) -> Vec<U>where    F: Fn(T) -> Fut,    Fut: Future<Output = U>,{    futures::future::join_all(items.into_iter().map(f)).await}```

Runtime

Light mode uses the GitHub Light Default theme, and dark mode uses the GitHub Dark Default theme.

Customize themes with server.highlight in vp/config/runtime.ts:

TypeScript
export default {  server: {    highlight: {      light: 'github-light-default',      dark: 'github-dark-default',    },  },}

If light or dark is missing, does not exist, or fails to load, the default theme is used.

Supported Themes

Shiki provides dozens of themes. See the Shiki official documentation for details.

Advanced Usage

Highlight Lines

Add {lines} after the code block language to highlight specific lines. Single lines, multiple lines, and ranges are supported.

TypeScript
const name = 'VanillaPress'const version = '1.5'export function info() {  return `${name}@${version}`}

Markdown
```ts {2,4-6}const name = 'VanillaPress'const version = '1.5'export function info() {  return `${name}@${version}`}```

You can also use [!code highlight]. When it is placed at the end of a code line, it targets the current line. When it is placed on its own comment line, it targets the next line. The marker is removed during build and does not appear in the final HTML.

TypeScript
const name = 'VanillaPress'const version = '1.5'export function info() {  return `${name}@${version}`}

Markdown
```tsconst name = 'VanillaPress'const version = '1.5' // [!code highlight]export function info() {  // [!code highlight:3]  return `${name}@${version}`}```

[!code highlight:3] highlights three lines starting from the target line.

Focus Code

Use [!code focus] to emphasize key lines and dim the rest of the same code block.

TypeScript
const name = 'VanillaPress'const version = '1.5'export function info() {  return `${name}@${version}`}

Markdown
```tsconst name = 'VanillaPress'const version = '1.5' // [!code focus]export function info() {  return `${name}@${version}` // [!code focus]}```

Continuous ranges are supported too:

TypeScript
export function createApp() {  const app = {}  return app}

Markdown
```tsexport function createApp() {  // [!code focus:3]  const app = {}  return app}```

Color Differences

Use [!code ++] and [!code --] to mark added and removed lines. This is useful for showing before/after changes inside a code block.

TypeScript
const theme = 'github-light-default'const darkTheme = 'github-dark-default'const darkTheme = 'github-dark-high-contrast'

Markdown
```tsconst theme = 'github-light-default'const darkTheme = 'github-dark-default' // [!code --]const darkTheme = 'github-dark-high-contrast' // [!code ++]```

Errors and Warnings

Use [!code warning] and [!code error] to mark warning or error lines.

TypeScript
function loadTheme(theme?: string) {  if (!theme) return 'github-light-default'  if (theme === 'unknown') throw new Error('Invalid theme')  return theme}

Markdown
```tsfunction loadTheme(theme?: string) {  if (!theme) return 'github-light-default' // [!code warning]  if (theme === 'unknown') throw new Error('Invalid theme') // [!code error]  return theme}```

Line Numbers

Add line-numbers after the code block language to show line numbers.

TypeScript
export const siteName = 'VanillaPress'export const version = '1.5'

Markdown
```ts line-numbersexport const siteName = 'VanillaPress'export const version = '1.5'```

You can also set the starting line number:

TypeScript
export function mount() {  return true}

Markdown
```ts line-numbers=10export function mount() {  return true}```