---
title: Format code
description: Use fenced code blocks, metadata, and code groups to present code clearly in Radiant Docs.
---

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.

<ComponentPreview showAllCode>
  ````mdx
  ```ts title="hello-world.ts" showLineNumbers
  const message = "Hello, world";

  console.log(message);
  ```
  ````
</ComponentPreview>

## Code blocks

### Choose a language

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

<ComponentPreview>
  ````mdx
  ```ts
  const total = 3;
  ```

  ```ruby
  total = 3
  puts total
  ```

  ```python
  total = 3
  ```
  ````
</ComponentPreview>

### Show a file name

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

<ComponentPreview showAllCode>
  ````mdx
  ```ts title="app.ts"
  export function greet(name: string) {
    return `Hello, ${name}`;
  }
  ```
  ````
</ComponentPreview>

### Show line numbers

Use `showLineNumbers` when readers need to reference a specific line.

<ComponentPreview showAllCode>
  ````mdx
  ```ts showLineNumbers
  const total = 3;
  const formatted = total.toString();

  console.log(formatted);
  ```
  ````
</ComponentPreview>

### Highlight important lines

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

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

### Hide the language icon

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

<ComponentPreview showAllCode>
  ````mdx
  ```ts title="app.ts" hideLanguageIcon
  export function greet(name: string) {
    return `Hello, ${name}`;
  }
  ```
  ````
</ComponentPreview>

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.

<ComponentPreview>
  ````mdx
    <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>
  ````
</ComponentPreview>

<Callout type="tip" title="When to use a code group">
  Use a code group when readers need to compare options, such as the same
  command across tools or the same logic across languages.
</Callout>