Syntax Highlighting

overview:

• execution: build-time only
• output: precomputed CSS; no heavy client-side bundle
• engines: Rehype Pretty Code + Shiki
• accuracy: TextMate grammars over regex; VS Code-like HTML

Warning

Syntax highlighting impacts build speed when notes contain many code snippets.

Formatting

inline_code:

• syntax: backticks on one line

fenced_code:

• syntax: language id after opening fence
• source:

```ts
export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor

  return cleanPath + anchor
}
```

• output:

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

Titles

file_title:

• syntax: double-quoted title
• source:

```js title="..."

```

• output:

quartz/path.ts

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

Line highlighting

line_highlighting:

• syntax: numeric ranges inside {}
• source:

```js {1-3,4}

```

• output:

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

Word highlighting

word_highlighting:

• syntax: literal regex after language id
• source:

```js /useState/
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
```

• output:

const [age, setAge] = useState(50)
const [name, setName] = useState("Taylor")

Inline highlighting

inline_highlighting:

• syntax: append to inline code
• source:

This is an array `[1, 2, 3]{:js}` of numbers 1 through 3.

• output:

This is an array [1, 2, 3] of numbers 1 through 3.

Line numbers

line_numbers:

• default: automatic
• start_number_syntax: showLineNumbers{number}
• source:

```js showLineNumbers{number}

```

• output:

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

Escaping code blocks

escaping:

• syntax: wrap a code block with an outer fence containing one more backtick than the inner fence
• source:

````
```js /useState/
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
```
````

Customization

plugin:

• SyntaxHighlighting
• customization: see plugin page