nested tag support and tag index page

Jacky Zhao

2023-07-26 cee2883c0889a65e2786d70eb81932f5ed017e59

 content/features/syntax highlighting.md

@@ -1,5 +1,7 @@
---
title: Syntax Highlighting
tags:
  - plugin/transformer
---

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.
@@ -12,6 +14,7 @@
> 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.

````
@@ -37,11 +40,12 @@
```

### Titles

Add a file title to your code block, with text inside double quotes (`""`):

````
```js title="..."
 

```
````

@@ -56,11 +60,12 @@
```

### Line highlighting

Place a numeric range inside `{}`.

````
```js {1-3,4}
 

```
````

@@ -75,6 +80,7 @@
```

### Word highlighting

A series of characters, like a literal regex.

````
@@ -85,16 +91,17 @@
````

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

### 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}
 

```
````

@@ -109,6 +116,7 @@
```

### Escaping code blocks

You can format a codeblock inside of a codeblock by wrapping it with another level of backtick fences that has one more backtick than the previous fence.

`````
@@ -121,6 +129,7 @@
`````

## Customization

- Removing syntax highlighting: delete all usages of `Plugin.SyntaxHighlighting()` from `quartz.config.ts`.
- Style: By default, Quartz uses derivatives of the GitHub light and dark themes. You can customize the colours in the `quartz/styles/syntax.scss` file.
- Plugin: `quartz/plugins/transformers/syntax.ts`
- Plugin: `quartz/plugins/transformers/syntax.ts`