Code Block

Write a code example

Insert a code block from /, then edit the code inside it. Use the language control to identify the language. Text in a code block is edited as code rather than formatted prose.

Edit in Visual

Edit the code block in place, then switch to Source to inspect its language and metadata.

code-block.md

StarlightFumadocsProseflyGeneric

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

```javascript title="src/editor.ts" frame="code" {1}
const title = 'Getting started';
console.log(title);
```

Code metadata

Starlight and Prosefly use Expressive Code metadata such as title, frame, and highlighted lines. Fumadocs uses its own metadata syntax, including lineNumbers, tab, and tab-group. Generic keeps the plain Markdown fence and leaves profile-specific metadata in Source.

Prosefly does not execute these examples. Website syntax highlighting and other code transformations are handled by the website’s build. For diagram blocks, see Mermaid.