Jacky Zhao
2023-07-23 7db2eda76cf51fd631d385c12a7b411339406067
content/features/syntax highlighting.md
@@ -12,6 +12,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,6 +38,7 @@
```
### Titles
Add a file title to your code block, with text inside double quotes (`""`):
````
@@ -56,6 +58,7 @@
```
### Line highlighting
Place a numeric range insideĀ `{}`.
````
@@ -75,6 +78,7 @@
```
### Word highlighting
A series of characters, like a literal regex.
````
@@ -85,11 +89,12 @@
````
```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}`:
````
@@ -109,6 +114,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 +127,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`