# Code & Syntax Highlighting \[Rich markup and annotations for code]
Use fenced code blocks with triple backticks (` ``` `) to format code. Add a language identifier to enable syntax highlighting.
For reusable code snippets and `// [!include ...]`, see [Code Snippets](/guide/code-snippets).
:::code-group
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````md [Markdown]
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````
:::
## Titles
Code blocks can have titles. Add the title in the code block metadata after the opening backticks.
:::code-group
```ts [hello.ts]
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````md [Markdown]
```ts [hello.ts]
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````
:::
## Line Numbers
:::code-group
```ts
// [!code line-numbers]
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````md [Markdown]
```ts
// [\!code line-numbers]
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````
:::
## Word Wrap Toggle
:::code-group
```ts
// [!code show-wrap]
export function Head() {
return (
<>
{/* Theme initialization (prevents FOUC) */}
<>
)
}
```
````md [Markdown]
```ts
// [\!code show-wrap]
export function Head() {
return (
<>
{/* Theme initialization (prevents FOUC) */}
<>
)
}
```
````
:::
## Line Focus
:::code-group
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!` // [!code focus]
}
```
````md [Markdown]
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!` // [\!code focus]
}
```
````
:::
## Word Focus
:::code-group
```ts
// [!code word:name]
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````md [Markdown]
```ts
// [\!code word:name]
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````
:::
## Diff
:::code-group
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!` // [!code --]
return `Howdy, ${name}!` // [!code ++]
}
```
````md [Markdown]
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!` // [\!code --]
return `Howdy, ${name}!` // [\!code ++]
}
```
````
:::
## Collapse
:::code-group
```ts
export function hello(name: string = 'World') { // [!code collapse:1 collapsed]
return `Hello, ${name}!`
}
```
````md [Markdown]
```ts
export function hello(name: string = 'World') { // [\!code collapse:1 collapsed]
return `Hello, ${name}!`
}
```
````
:::
## Fold
:::code-group
```tsx
// [!code fold /(?<=")[^"]{10,}(?=")/g]
function Foo() {
return (
Hello, World!
)
}
```
hey
)
}
```
````
:::
## Annotations
Not to be confused with [Twoslash Callouts](/guide/twoslash#callouts), annotations work without Twoslash.
:::code-group
```ts
const a = 1
// @log: Custom log message
const b = 1
// @error: Custom error message
const c = 1
// @warn: Custom warning message
const d = 1
// @annotate: Custom annotation message
```
````md [Markdown]
```ts
const a = 1
// @\log: Custom log message
const b = 1
// @\error: Custom error message
const c = 1
// @\warn: Custom warning message
const d = 1
// @\annotate: Custom annotation message
```
````
:::
## Shell Commands
Shell code blocks with prompt symbols have per-line copy buttons and the prompt is not copied.
:::code-group
```bash
$ pnpm create vocs
$ pnpm vocs dev
$ pnpm vocs build
$ pnpm vocs preview
```
````md [Markdown]
```bash
$ pnpm create vocs
$ pnpm vocs dev
$ pnpm vocs build
$ pnpm vocs preview
```
````
:::
## ANSI
Use `ansi` code blocks for terminal output with ANSI escape sequences.
:::code-group
```ansi
\x1b[0;32mcolored foreground\x1b[0m
\x1b[0;42mcolored background\x1b[0m
\x1b[0;1mbold text\x1b[0m
```
````md [Markdown]
```ansi
\x1b[0;32mcolored foreground\x1b[0m
\x1b[0;42mcolored background\x1b[0m
\x1b[0;1mbold text\x1b[0m
```
````
:::
## Terminal Directive
For cleaner separation of commands and output, use the `:::terminal` directive. This stitches code blocks together visually.
:::::code-group
:::terminal
```bash
forge test
```
```ansi
\x1b[32m[PASS]\x1b[0m test_Increment() (gas: 28783)
Suite result: \x1b[32mok\x1b[0m. \x1b[32m1\x1b[0m passed.
```
:::
````md [Markdown]
:::terminal
```bash
forge test
```
```ansi
\x1b[32m[PASS]\x1b[0m test_Increment() (gas: 28783)
Suite result: \x1b[32mok\x1b[0m. \x1b[32m1\x1b[0m passed.
```
:::
````
:::::
## Code Groups
Code groups let related snippets share one framed surface.
::::code-group
:::code-group
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````md [Markdown]
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````
:::
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````md [Markdown]
```ts
export function hello(name: string = 'World') {
return `Hello, ${name}!`
}
```
````
:::
`````
::::
Code groups automatically display icons based on the label text.
:::code-group
```bash [npm]
npm i vocs
```
```bash [pnpm]
pnpm add vocs
```
```bash [yarn]
yarn add vocs
```
```bash [bun]
bun add vocs
```
:::
Code groups with package manager tabs automatically sync across the page.
:::code-group
```bash [npm]
npm create vocs
```
```bash [pnpm]
pnpm create vocs
```
```bash [yarn]
yarn create vocs
```
```bash [bun]
bun create vocs
```
:::
## Inline Code
:::code-group
Inline `code` has `back-ticks around` it.
Inline [`code`](#inline-code) with link.
Inline `console.log("hello world"){:js}` highlighted code.
Inline ANSI `> Local: \x1b[0;36mhttp://localhost:\x1b[0;36;1m3000\x1b[0;36m/\x1b[0m{:ansi}`.
```md [Markdown]
Inline `code` has `back-ticks around` it.
Inline [`code`](#inline-code) with link.
Inline `console.log("hello world"){:js}` highlighted code.
Inline ANSI `> Local: \x1b[0;36mhttp://localhost:\x1b[0;36;1m3000\x1b[0;36m/\x1b[0m{:ansi}`.
```
:::