Syntax highlighting in Quartz is completely done at build-time. This means that Quartz only ships pre-calculated CSS to highlight the right words so there is no heavy client-side bundle that does the syntax highlighting.
And, unlike some client-side highlighters, it has a full TextMate parser grammar instead of using Regexes, allowing for highly accurate code highlighting.
In short, it generates HTML that looks exactly like your code in an editor like VS Code. Under the hood, it’s powered by Rehype Pretty Code which uses Shiki.
Warning
Syntax highlighting does have an impact on build speed if you have a lot of code snippets in your notes.
Formatting
Text inside backticks on a line will be formatted like code.
```ts
export function trimPathSuffix(fp: string): string {
fp = clientSideSlug(fp)
let [cleanPath, anchor] = fp.split("#", 2)
anchor = anchor === undefined ? "" : "#" + anchor
return cleanPath + anchor
}
```
export function trimPathSuffix(fp: string): string {
fp = clientSideSlug(fp)
let [cleanPath, anchor] = fp.split("#", 2)
anchor = anchor === undefined ? "" : "#" + anchor
return cleanPath + anchor
}Line highlighting
Draw attention to a particular line of code. Place a numeric range inside {}.
```ts {2-3,6}
```
Output:
export function trimPathSuffix(fp: string): string {
fp = clientSideSlug(fp)
let [cleanPath, anchor] = fp.split("#", 2)
anchor = anchor === undefined ? "" : "#" + anchor
return cleanPath + anchor
}Line numbers
Syntax highlighting has line numbers configured automatically. If you want to start line numbers at a specific number, use showLineNumbers{number}:
```js showLineNumbers{number}
```
export function trimPathSuffix(fp: string): string {
fp = clientSideSlug(fp)
let [cleanPath, anchor] = fp.split("#", 2)
anchor = anchor === undefined ? "" : "#" + anchor
return cleanPath + anchor
}Word Highlighting
Draw attention to a particular word or series of characters.
```tsx /floatingStyles/
import { useFloating } from "@floating-ui/react";
function MyComponent() {
const { refs, floatingStyles } = useFloating();
return (
<>
<div ref={refs.setReference} />
<div ref={refs.setFloating} style={floatingStyles} />
</>
);
}
```
Output:
import { useFloating } from "@floating-ui/react";
function MyComponent() {
const { refs, floatingStyles } = useFloating();
return (
<>
<div ref={refs.setReference} />
<div ref={refs.setFloating} style={floatingStyles} />
</>
);
}Inline Code Highlighting
Append {:lang} to the end of inline code to highlight it like a regular code block
The result of `[1, 2, 3].join('-'){:js}` is `'1-2-3'{:js}`.
Output:
The result of [1, 2, 3].join('-') is '1-2-3'.
Titles
Add a file title to your code block, with text inside double quotes (""):
```js title="..."
```
export function trimPathSuffix(fp: string): string {
fp = clientSideSlug(fp)
let [cleanPath, anchor] = fp.split("#", 2)
anchor = anchor === undefined ? "" : "#" + anchor
return cleanPath + anchor
}Captions
Add a caption underneath your code block, with text inside double quotes (""):
```js caption="Example caption"
```Output:
[1, 2, 3].join('-')ANSI Highlighting
```ansi
[0m [0;32m✓[0m [0;2msrc/[0mindex[0;2m.test.ts (1)[0m
[0;2m Test Files [0m [0;1;32m1 passed[0;98m (1)[0m
[0;2m Tests [0m [0;1;32m1 passed[0;98m (1)[0m
[0;2m Start at [0m 23:32:41
[0;2m Duration [0m 11ms
[42;1;39;0m PASS [0;32m Waiting for file changes...[0m
[0;2mpress [0;1mh[0;2m to show help, press [0;1mq[0;2m to quit
```
Output:
✓ src/index.test.ts (1)
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 23:32:41
Duration 11ms
PASS Waiting for file changes...
press h to show help, press q to quit```ansi
[0;36m vite v5.0.0[0;32m dev server running at:[0m
> Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m
> Network: [0;2muse `--host` to expose[0m
[0;36mready in 125ms.[0m
[0;2m8:38:02 PM[0m [0;36;1m[vite][0m [0;32mhmr update [0;2m/src/App.jsx
```
Output:
vite v5.0.0 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 125ms.
8:38:02 PM [vite] hmr update /src/App.jsxInline ANSI: `> Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m{:ansi}`
Output:
Inline ANSI: > Local: http://localhost:3000/
Escaping code blocks
You can format a code block inside of a code block by wrapping it with another level of backtick fences that has one more backtick than the previous fence.
````
```js /useState/
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
```
````
Customization
Syntax highlighting is a functionality of the SyntaxHighlighting plugin. See the plugin page for customization options.