---
title: Code Blocks
description: Syntax highlighting, code groups, line numbers, and more.
icon: code
---

# Code Blocks

Syntext provides powerful code block features including syntax highlighting for 50+ languages, tabbed code groups, line highlighting, and more.

## Basic Code Block

Use fenced code blocks with a language identifier:

````mdx
```typescript
const greeting = "Hello, World!";
console.log(greeting);
```
````

Renders with syntax highlighting:

```typescript
const greeting = "Hello, World!";
console.log(greeting);
```

## Supported Languages

Common languages: `javascript`, `typescript`, `python`, `go`, `rust`, `java`, `ruby`, `php`, `bash`, `shell`, `json`, `yaml`, `sql`, `graphql`, `html`, `css`, `markdown`.

See the [full list of supported languages](https://shiki.style/languages).

## Code Block Title

Add context with a title:

````mdx
```typescript title="src/index.ts"
export function greet(name: string): string {
  return `Hello, ${name}!`;
}
```
````

```typescript title="src/index.ts"
export function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Every code block gets a header automatically: the title (or a pretty language name like "TypeScript" — shell languages show as "Terminal") appears on the left, with a language chip and copy button on the right. When you provide a `title`, the language chip keeps the language visible.

## Line Numbers

Show line numbers with `showLineNumbers`:

````mdx
```typescript showLineNumbers
const a = 1;
const b = 2;
const sum = a + b;
console.log(sum);
```
````

```typescript showLineNumbers
const a = 1;
const b = 2;
const sum = a + b;
console.log(sum);
```

## Line Highlighting

Highlight specific lines:

````mdx
```typescript {2,4-5}
function process(data: Data) {
  const validated = validate(data); // highlighted
  
  const result = transform(validated); // highlighted
  return result; // highlighted
}
```
````

```typescript {2,4-5}
function process(data: Data) {
  const validated = validate(data);
  
  const result = transform(validated);
  return result;
}
```

## CodeGroup (Tabbed Code)

Show multiple code variants in tabs:

````mdx
<CodeGroup>

```bash title="curl"
curl https://api.example.com/users
```

```typescript title="TypeScript"
const users = await client.users.list();
```

```python title="Python"
users = client.users.list()
```

</CodeGroup>
````

<CodeGroup>

```bash title="curl"
curl https://api.example.com/users
```

```typescript title="TypeScript"
const users = await client.users.list();
```

```python title="Python"
users = client.users.list()
```

</CodeGroup>

<Note>
The user's language preference is saved and applied across all CodeGroups on the site.
</Note>

## Diff Highlighting

Show code changes with `diff` language:

````mdx
```diff
- const old = "before";
+ const new = "after";
```
````

```diff
- const old = "before";
+ const new = "after";
```

## Terminal Output

Use `bash` or `shell` for terminal commands:

````mdx
```bash
npm install @syntext/sdk
```
````

```bash
npm install @syntext/sdk
```

For output without a prompt:

````mdx
```text
Build complete in 2.3s
Output: ./dist (4.2 MB)
```
````

```text
Build complete in 2.3s
Output: ./dist (4.2 MB)
```

## JSON with Comments

```jsonc
{
  // Configuration file
  "name": "my-docs",
  "version": "1.0.0"
}
```

## Inline Code

Use backticks for inline code:

```mdx
Use the `--force` flag to overwrite existing files.
```

Use the `--force` flag to overwrite existing files.

## Disabling Highlighting

Add `theme={null}` (or `theme="none"`) to the fence meta to skip syntax highlighting
entirely — useful for log output, ASCII diagrams, or intentionally plain snippets:

````mdx
```text theme={null}
2026-06-22 14:03:11 INFO  build started
2026-06-22 14:03:42 INFO  build finished in 31s
```
````

The block keeps its copy button and header but renders without token colors.

## Code Block Props

| Prop | Example | Description |
|------|---------|-------------|
| Language | ` ```typescript` | Syntax highlighting |
| `title` | `title="app.ts"` | File name or description |
| `showLineNumbers` | `showLineNumbers` | Display line numbers |
| `{lines}` | `{2,4-6}` | Highlight specific lines |
| `theme` | `theme={null}` | Disable syntax highlighting for this block |

## Best Practices

<Tip>
Always specify a language for syntax highlighting. Use `text` or `plaintext` for raw output.
</Tip>

- Use `title` for file paths to provide context
- Group related code samples with `<CodeGroup>`
- Keep code examples focused and minimal
- Test that all code examples actually work