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#

Inline Code#

Add a language attribute to highlight code within a sentence: const count = 1. Use Ref<string> to highlight a TypeScript type fragment.

Add `const count = 1`{lang="ts"} to an example.
Use `Ref<string>`{lang="ts-type"} for a type.

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

Wrap standalone fences, complete code groups, or terminals in CodeTabs. The tab row belongs to the outer frame. Files inside a code group keep their normal headers.

Fences use their filename and language icon as the tab label. Groups use title; terminals use title or their shell name. The selected label changes color without changing weight or adding an indicator.

const greeting: string = 'Hello, Brief!'

function greet(name: string): string {
  return `${greeting} Welcome, ${name}.`
}

const readers = ['Ada', 'Grace', 'Linus']

for (const reader of readers) {
  console.log(greet(reader))
}

const greeting = 'Hello, Brief!'

const readers = [
  { name: 'Ada', locale: 'en' },
  { name: 'Grace', locale: 'pt' },
  { name: 'Linus', locale: 'en' },
]

function greet({ name, locale }) {
  const welcome = locale === 'pt' ? 'Bem-vindo' : 'Welcome'
  return `${greeting} ${welcome}, ${name}.`
}

function printGreetings(people) {
  console.log('Starting the greeting service...')
  console.log('')

  for (const person of people) {
    console.log(greet(person))
  }

  console.log('')
  console.log(`Greeted ${people.length} readers.`)
}

printGreetings(readers)

Synchronization#

Use the same syncID and explicit syncValue values on CodeTabs and ordinary Tabs. Selecting either updates all matching groups and persists the choice in local storage. A group without the selected value shows its first option without overwriting the shared preference.

::::CodeTabs{syncID="code-tabs-language"}

```ts [greeting.ts] syncValue="ts"
const greeting: string = 'Hello, Brief!'
```

```js [greeting.js] syncValue="js"
const greeting = 'Hello, Brief!'
```

::::

Groups with Tabs#

Place entire CodeBlockGroup components inside CodeTabs, with a title and syncValue on each group. Individual files cannot contain tab groups.

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

import { greet } from './greeting'

const readers = ['Ada', 'Grace', 'Linus']

for (const reader of readers) {
  console.log(greet(reader))
}

const messages = {
  en: 'Hello',
  pt: 'Olá',
  fr: 'Bonjour',
}

export function greet(name, locale = 'en') {
  const message = messages[locale] ?? messages.en
  return `${message}, ${name}!`
}

export function supportedLocales() {
  return Object.keys(messages)
}

export const readers = [
  { name: 'Ada', locale: 'en' },
  { name: 'Grace', locale: 'pt' },
  { name: 'Linus', locale: 'fr' },
  { name: 'Margaret', locale: 'en' },
]

import { greet, supportedLocales } from './messages/greeting.js'
import { readers } from './data/readers.js'

console.log('Starting the greeting service...')
console.log(`Available locales: ${supportedLocales().join(', ')}`)
console.log('')

for (const { name, locale } of readers) {
  console.log(greet(name, locale))
}

console.log('')
console.log(`Greeted ${readers.length} readers.`)
console.log('All greetings delivered successfully.')

Terminals with Tabs#

Terminal options retain their own prompts, recordings, and copy controls. Put syncValue on the Terminal, not its steps.

Hello, Ada!
Hello, Grace!
Hello, Linus!

Starting the greeting service...
Available locales: en, pt, fr

Hello, Ada!
Olá, Grace!
Bonjour, Linus!
Hello, Margaret!

Greeted 4 readers.
All greetings delivered successfully.

v24.15.0

Code Tabs Reference#

Code Block Reference#

Code Group Reference#