Code blocks

Code blocks in Dokly are syntax-highlighted with VS Code-quality themes. Every block has a copy button and an optional language label.

Basic example#

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

Insert#

Use the slash menu: /code. Or type three backticks ``` at the start of a new line — the block transforms into a code block, and the cursor lands in the language field at the top of the block.

Specifying the language#

Set the language from the dropdown at the top of the code block. Common ones:

If you don't pick a language, the block has no syntax highlighting. Pick text explicitly when you want a code block for non-code (e.g., terminal output).

Title and filename#

Set a Title in the block's settings to show a header above the code (e.g., components/Button.tsx). This is the right way to indicate "this code lives in this file".

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

Highlighting lines#

Highlight specific lines from the block's settings — enter line numbers or ranges (e.g., 2, 4-5).

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

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.

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#