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:

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

Renders with syntax highlighting:

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.

Code Block Title

Add context with a title:

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

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:

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

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

Line Highlighting

Highlight specific lines:

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

function process(data: Data) {
  const validated = validate(data);
  
  const result = transform(validated);
  return result;
}

CodeGroup (Tabbed Code)

Show multiple code variants in tabs:

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

curl https://api.example.com/users

const users = await client.users.list();

users = client.users.list()

Diff Highlighting

Show code changes with diff language:

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

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

Terminal Output

Use bash or shell for terminal commands:

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

npm install @syntext/sdk

For output without a prompt:

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

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

JSON with Comments

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

Inline Code

Use backticks for inline code:

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:

```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

Best Practices

• 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