Code blocks

Code blocks in Dokly are syntax-highlighted using Shiki, with the same VS Code themes you're used to. Every block has a copy button and an optional language label.

Basic example#

function greet(name) {
  return `Hello, ${name}!`;
}

The Markdown source is just triple-backtick fenced code:

```js
function greet(name) {
  return `Hello, ${name}!`;
}
```

Specifying the language#

Add a language tag right after the opening backticks. Common ones:

If you omit the tag, the block has no syntax highlighting. Use text explicitly when you want a code block for non-code (e.g., terminal output).

Title and filename#

Add a title to display a header above the code:

export function Button({ children }) {
  return <button>{children}</button>;
}

Source:

```js title="components/Button.tsx"
export function Button({ children }) { ... }
```

This is the right way to indicate "this code lives in this file".

Highlighting lines#

Highlight specific lines with {n} or {a-b}:

function process(input) {
  const cleaned = input.trim();
  console.log("Processing:", cleaned);
  const result = transform(cleaned);
  return result;
}

Source:

```js {2,4-5}
function process(input) { ... }
```

Copy button#

Every code block has a copy button in the top-right that copies the raw code (without line numbers or highlighting). The button shows for 1.5 seconds, then fades.

There's no way to disable it — copyable code is a baseline accessibility expectation.

Long lines and wrapping#

Long lines wrap by default — readers shouldn't have to scroll horizontally on mobile. If you need a strict no-wrap block (e.g., for tabular log output), add nowrap:

```text nowrap
2026-04-19 12:34:56 INFO request started method=GET path=/api/users user_id=42 ip=10.0.0.1
```

When to use a code block vs inline code#

If you write more than ~80 characters of inline code, switch to a block.

Where next#