Syntax Highlighting

Verto uses Shiki v3 for build-time syntax highlighting with dual light/dark themes. Code blocks are fully rendered during the build, so zero client-side JavaScript is needed for highlighting.

How It Works

1. Build-time highlighting — during MDX compilation, Shiki processes every code block server-side as a rehype plugin in the pipeline
2. Dual theme output — Shiki generates HTML with inline styles for both github-light and github-dark themes simultaneously
3. CSS variable switching — the defaultColor: false setting means CSS variables control which theme is visible. When dark mode toggles, code blocks switch instantly with no re-render

Supported Languages

Verto ships with 10 languages configured:

Use the identifier as the language tag on fenced code blocks:

```typescript
const greeting: string = "Hello, Verto";
```

Themes

Verto renders both themes into every code block:

Both sets of styles exist in the HTML at all times. CSS variables determine which one the browser paints. Toggling dark mode flips the visible theme with no layout shift and no network request.

Line Highlighting

The // [!code highlight] notation marks specific lines for emphasis. Add it at the end of any line you want highlighted:

function greet(name: string) {
  const message = `Hello, ${name}`; 
  return message;
}

You can also use the meta string {1,3-5} to highlight lines without touching the code:

const a = 1;
const b = 2; // highlighted
const c = 3;
const d = 4; // highlighted
const e = 5; // highlighted

Diff View

Use // [!code ++] and // [!code --] to render diff additions / removals with green / red gutters. Or write a diff block:

function greet(name: string) {
  return `Hello, ${name}!`; 
  return `Hi there, ${name}!`; 
}

- old line
+ new line

Focus Mode

Mark lines with // [!code focus] to blur everything else. Hovering the block reveals the surrounding context.

function focused() {
  const noise = 1;
  const important = 2; 
  const more = 3;
  return important; 
}

Word Highlighting

Use // [!code word:foo] (Shiki notation) or the meta /foo/ (regex-style) to highlight every occurrence of a word inside the block:

const name = 'verto';
const slogan = 'verto: open, read, comment.';

File Titles & Line Numbers

Set title="…" (or filename="…") and showLineNumbers in the meta string. The header bar shows a macOS-style filename badge; line numbers are rendered with pure CSS counters — still zero client JS for the numbers themselves.

export default {
  theme: 'github-dark',
  features: ['mermaid', 'katex'],
};

Long Code Collapse

Code blocks longer than ~30 lines collapse to a soft fade with an Expand pill so a long snippet doesn't blow up the reading flow. Click to reveal the rest.

Copy to Clipboard

Every code block includes a built-in copy button. Notation comment markers (e.g. // [!code ++]) are stripped from the copied text, so pasting elsewhere gives you clean code.

Pass noCopy in the meta string to hide the copy button for diagram-only or output-only snippets.

$ echo "look but don't touch"

Related

• Dark Mode — the CSS variable system that powers instant theme switching
• Block Components — the full set of MDX components including CodeBlock