Format Code

Use fenced code blocks for anything longer than a short inline identifier. Add a language whenever you can so Radiant Docs can render syntax highlighting correctly.

hello-world.ts

1const message = "Hello, world";2 3console.log(message);

```ts title="hello-world.ts" showLineNumbersconst message = "Hello, world"; console.log(message);```

Code blocks

Choose a language

Add a language after the opening fence to enable syntax highlighting.

const total = 3;

const total = 3;

total = 3

```tsconst total = 3;``` ```plaintextconst total = 3;```  ```pythontotal = 3```

Show a file name

Use title when the file name helps readers understand the snippet.

app.ts

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

```ts title="app.ts"export function greet(name: string) {  return `Hello, ${name}`;}```

Show line numbers

Use showLineNumbers when readers need to reference a specific line.

1const total = 3;2const formatted = total.toString();3 4console.log(formatted);

```ts showLineNumbersconst total = 3;const formatted = total.toString(); console.log(formatted);```

Highlight important lines

Use curly braces after the language to highlight a single line, multiple lines, or a range.

1const total = 3;2const formatted = total.toString();3const label = `Total: ${formatted}`;4const isReady = label.length > 0;5console.log(label);6console.log(isReady);

```ts {2,5-6} showLineNumbersconst total = 3;const formatted = total.toString();const label = `Total: ${formatted}`;const isReady = label.length > 0;console.log(label);console.log(isReady);```

Hide the language icon

Use hideLanguageIcon when the file name already gives enough context or you want less visual noise in the tab header.

app.ts

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

```ts title="app.ts" hideLanguageIconexport function greet(name: string) {  return `Hello, ${name}`;}```

This has a visible effect when the code block shows a filename tab, such as with title or inside a CodeGroup.

Code groups

Use CodeGroup when you want to show the same idea in multiple languages or tools.

console.log("Hello, world");

print("Hello, world")

package main import "fmt" func main() {  fmt.Println("Hello, world")}

npm install radiant-docs

pnpm add radiant-docs

yarn add radiant-docs

  <CodeGroup>  ```ts title="hello.ts"  console.log("Hello, world");  ```   ```python title="hello.py"  print("Hello, world")  ```   ```go title="hello.go"  package main   import "fmt"   func main() {    fmt.Println("Hello, world")  }  ```</CodeGroup> <CodeGroup>  ```bash title="npm" hideLanguageIcon  npm install radiant-docs  ```   ```bash title="pnpm" hideLanguageIcon  pnpm add radiant-docs  ```   ```bash title="yarn" hideLanguageIcon  yarn add radiant-docs  ```</CodeGroup>