Code

import { greet } from "./greet"
import "./styles.css"

const target = document.querySelector("#app")
if (target) {
  target.textContent = greet("reader")
}

from fastapi import FastAPI
from .routes import router

app = FastAPI(title="Brief demo")
app.include_router(router)

@app.get("/health")
def health():
    return {"status": "ready"}

Group multiple code blocks into an IDE-like folder explorer.

function greet(name: string): string {
  return `Hi, ${name}`
  return `Hello, ${name}!`
}

console.log(greet('Brief'))

Use a single code block for short examples.

Usage#

Code Block#

Write a fenced code block with a language for syntax highlighting.

```ts
function greet(name: string): string {
  return `Hi, ${name}`
  return `Hello, ${name}!`
}

console.log(greet('Brief'))
```

Header#

Add a filename in square brackets to show a header, or omit it for a headerless block.

```ts [greeting.ts]
function greet(name: string): string {
  return `Hi, ${name}`
  return `Hello, ${name}!`
}

console.log(greet('Brief'))
```

Line Numbers#

Set lineNumbers=true to show line numbers.

```ts lineNumbers=true
function greet(name: string): string {
  ...
}
```

Line Highlights & Diffs#

Use added, deleted, and highlighted ranges to highlight particular lines.

```ts highlighted="1" added="2-3" removed="4-6"
function greet(name: string): string {
  ...
}
```

Compact#

Set compact=true to align the block's borders with the text column without changing its inner padding. This only affects standalone blocks on desktop.

```ts [greeting.ts] compact=true
console.log('Hello, Brief!')
```

Code Group#

Wrap related code blocks in CodeBlockGroup. File paths dictate the folder structure.

:::CodeBlockGroup{lineNumbers=false}

```ts [src/greeting.ts] deleted="1" added="2"
export const greeting = 'Hello, world!'
export const greeting = 'Hello, Brief!'
```

```ts [src/main.ts] highlighted="1" deleted="2" added="3"
import { greeting } from './greeting'
console.log('Welcome')
console.log(greeting)
```

:::

Set the group's lineNumbers to true to enable numbers for every file, or false to hide them. Each fence keeps its own annotation ranges.

Code Block Reference#

Code Group Reference#