Code blocks

Every fenced (```) code block gets dual light/dark syntax highlighting automatically via Shiki — no configuration needed, and it switches with the site’s own light/dark toggle. On top of that, each block’s meta string (the part after the language) or inline // [!code ...] comments turn on the features below.

Title

```js title="config.js"
export default { greeting: "hello" };
```

export default { greeting: "hello" };

Line highlighting — {1,3-5} meta

```js {1,3-4}
const a = 1;
const b = 2;
const c = 3;
const d = 4;
```

const a = 1;
const b = 2;
const c = 3;
const d = 4;

Line highlighting — [!code highlight]

Useful when the line to highlight might shift as the snippet changes — the annotation travels with the line instead of a fixed line number.

function greet(name) {
  console.log(`Hello, ${name}!`); 
}

Word highlighting — /word/ meta

```js /apiKey/
const apiKey = process.env.API_KEY;
fetch(url, { headers: { "X-Api-Key": apiKey } });
```

const apiKey = process.env.API_KEY;
fetch(url, { headers: { "X-Api-Key": apiKey } });

Word highlighting — [!code word:...]

const status = "pending"; 

Focus

Dims every other line, useful for walking through one part of a longer snippet:

function setup() {
  loadConfig();
  connectToDatabase(); 
  startServer();
}

Diff

const port = 3000; 
const port = process.env.PORT ?? 3000; 

Error / warning

const safe = validateInput(data);
const unsafe = eval(data); 
const deprecated = oldApi(); 

Wrap

By default long lines scroll horizontally. The wrap meta flag wraps them instead:

```js wrap
const message = "A very long line that would otherwise scroll horizontally instead of wrapping onto multiple lines.";
```

const message = "A very long line that would otherwise scroll horizontally instead of wrapping onto multiple lines.";

Line numbers

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));

Expandable

Collapses to a fixed height with a “Show more” toggle — useful for long reference snippets you don’t want dominating the page by default:

class Example:
    def one(self): pass
    def two(self): pass
    def three(self): pass
    def four(self): pass
    def five(self): pass
    def six(self): pass
    def seven(self): pass
    def eight(self): pass

Copy button

Every fenced block gets a copy-to-clipboard button automatically on hover — no opt-in needed.

Combining features

Meta-string flags combine freely, and comment-based annotations adapt to the language’s own comment syntax (# for Python/bash, // for JS/etc.):

def handler(event):
    process(event)  
    return {"status": "ok"}