# Syntax Highlighting (/docs/documentation/syntax_highlighting)

{/* TODO: This page contained Nextra-specific interactive examples with React hooks
    (useRef, useEffect, useState) that are incompatible with Fumadocs Server Components.
    The page needs to be rewritten with Fumadocs syntax highlighting examples. */}

This documentation uses [Shiki](https://shiki.matsu.io) for syntax highlighting at build time.

## Basic Usage

Add code blocks using triple backticks with a language identifier:

````md
```js
console.log('hello, world')
```
````

Renders as:

```js
console.log('hello, world')
```

## Supported Languages

All languages supported by Shiki are available. Common ones include:

- `js` / `javascript`
- `ts` / `typescript`
- `jsx` / `tsx`
- `bash` / `sh`
- `json`
- `yaml`
- `python`
- `go`
- `rust`
- `css`
- `html`
- `markdown` / `md`
- `sql`
- `dockerfile`

## Filenames

You can add a filename to code blocks:

````md
```js filename="example.js"
console.log('hello')
```
````

## Line Highlighting

Highlight specific lines:

````md
```js {1,3-4}
import React from 'react'

function Hello() {
  return <div>Hello</div>
}
```
````