# Code Block

Write code examples and choose the block language.

import ContentEditor from '@/components/editor/ContentEditor.astro';

## 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.

<ContentEditor content="code-block" />

````markdown
```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](/docs/editor/markdown/mermaid/).