Code Blocks

Dory provides rich code block components with syntax highlighting, tab groups, and interactive copy functionality.

Basic Code Block#

Use triple backticks with an optional language identifier:

def greet(name: str) -> str:
    return f"Hello, {name}!"

print(greet("World"))

Filenames and Highlighted Lines#

Text after the language becomes the block's filename. Add line numbers or ranges in braces to highlight them. A filename or highlight also turns on line numbers.

1{
2  "name": "Dory",
3  "logo": "./logo/logo.svg",
4  "colors": {
5    "primary": "#2C6BD4"
6  },
7  "fonts": {
8    "family": "Hanken Grotesk"
9  }
10}

Diffs#

Use diff for a plain diff, or diff-<lang> to keep syntax highlighting. Lines starting with + or - are marked, and the header counts them.

 "fonts": {
-   "family": "Inter",
+   "family": "Hanken Grotesk",
   "mono": { "family": "JetBrains Mono" }
 }

Terminal Sessions#

A bash, sh, shell, zsh or console block with $ prompts renders as a terminal. The command name is highlighted and other lines are output.

$ dory dev
✓ Compiled 48 pages in 1.2s
$ dory build
✓ Wrote 48 pages to ./dist

Supported Languages#

Dory supports syntax highlighting for 20+ languages:

CodeGroup — Multi-Language Tabs#

Use <CodeGroup> to show the same code in multiple languages. Each child code block becomes a tab, labelled by its title or language.

import requests

response = requests.get("https://api.example.com/users")
print(response.json())

CodeGroup with Title

Add a title prop to label the group:

import requests
response = requests.get("https://api.example.com/users")

HTTP Method Badges#

Add tag and label to a code block inside a CodeGroup to show HTTP method badges:

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

Inline Code#

Use single backticks for inline code within prose text.

Call the `greet()` function with a `name` parameter.

Copy Button#

All code blocks include a copy button in the header. It copies the raw code to the clipboard and shows a checkmark for 1 second.