Code blocks
A fenced code block becomes a code panel, with syntax highlighting, a header naming the language, and a copy button. Name the language after the opening fence.
Example
client = Acme(api_key="sk_test_123")
customer = client.customers.get(id="cus_1")```python
client = Acme(api_key="sk_test_123")
customer = client.customers.get(id="cus_1")
```Options
languagestringWritten straight after the opening fence, such as ```bash. It picks the highlighting, and labels the panel. A language that isn't listed below shows as plain text, unhighlighted.
titlestringA label for the panel's header instead of the language, such as a file name. Write it after the language: ```json title="package.json".
{ "dependencies": { "acme-api": "^2.4.0" } }```json title="package.json"
{ "dependencies": { "acme-api": "^2.4.0" } }
```Languages
| Language | Write |
|---|---|
| Shell | bash, or sh, shell, zsh, console, curl |
| PowerShell | powershell, or ps1 |
| JavaScript | javascript, or js |
| TypeScript | typescript, or ts |
| Python | python, or py |
| Go | go, or golang |
| Java | java |
| Kotlin | kotlin, or kt |
| PHP | php |
| Rust | rust, or rs |
| Ruby | ruby, or rb |
| Dart | dart |
| Swift | swift |
| JSON | json, or jsonc |
| YAML | yaml, or yml |
| TOML | toml |
| INI | ini |
| XML | xml |
| HTML | html |
| CSS | css |
| SQL | sql |
| GraphQL | graphql |
| Dockerfile | docker, or dockerfile |
| Diff | diff |
| Markdown | markdown, or md |
| MDX | mdx |
| Plain text | plaintext, or text, txt |
Colours
The highlighting follows your site's code theme, which you choose separately for light and dark in Appearance.
Showing backticks in a code block
A code block ends at the first line of three backticks, so it can't show three backticks as text. To write about Markdown itself, open and close the block with four backticks instead. The three-backtick lines inside then show as plain text:
````mdx
```bash
npm install acme-api
```
````What readers see:
```bash
npm install acme-api
```