mirror of
https://github.com/alrayyes/wiki.git
synced 2024-11-22 19:46:23 +00:00
1929241a62
* docs: first few plugins documented * docs: move plugin info * docs: move plugin docs to tag based system * docs: update latex example code snippet * docs: fix spelling of latex in title * docs: add missing linebreak * docs: remove plugin tag from feature pages * docs: shorten titles * docs: refine wording * docs: move plugin details for frontmatter * docs: add features/* tags * docs: update latex example * docs: make references more explicit * docs: add stubs for the remaining plugins * docs: more descriptions * docs: fix feature tags * docs: descriptions * docs: new plugin pages * docs: update configuration page * docs: more plugin work * docs: run prettier * docs: remove comments in config file and add link to docs * docs: minor fixes * docs: run prettier * docs: spelling * docs: update docs/plugins/AliasRedirects.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Assets.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/CNAME.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Static.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs * docs: update docs/features/Mermaid diagrams.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/RemoveDrafts.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/plugins/Assets.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: some updates * docs: work in review comments --------- Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
133 lines
3.1 KiB
Markdown
133 lines
3.1 KiB
Markdown
---
|
||
title: Syntax Highlighting
|
||
tags:
|
||
- feature/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.
|
||
|
||
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](https://rehype-pretty-code.netlify.app/) which uses [Shiki](https://github.com/shikijs/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
|
||
}
|
||
```
|
||
````
|
||
|
||
```ts
|
||
export function trimPathSuffix(fp: string): string {
|
||
fp = clientSideSlug(fp)
|
||
let [cleanPath, anchor] = fp.split("#", 2)
|
||
anchor = anchor === undefined ? "" : "#" + anchor
|
||
|
||
return cleanPath + anchor
|
||
}
|
||
```
|
||
|
||
### Titles
|
||
|
||
Add a file title to your code block, with text inside double quotes (`""`):
|
||
|
||
````
|
||
```js title="..."
|
||
|
||
```
|
||
````
|
||
|
||
```ts title="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
|
||
|
||
Place a numeric range inside `{}`.
|
||
|
||
````
|
||
```js {1-3,4}
|
||
|
||
```
|
||
````
|
||
|
||
```ts {2-3,6}
|
||
export function trimPathSuffix(fp: string): string {
|
||
fp = clientSideSlug(fp)
|
||
let [cleanPath, anchor] = fp.split("#", 2)
|
||
anchor = anchor === undefined ? "" : "#" + anchor
|
||
|
||
return cleanPath + anchor
|
||
}
|
||
```
|
||
|
||
### Word highlighting
|
||
|
||
A series of characters, like a literal regex.
|
||
|
||
````
|
||
```js /useState/
|
||
const [age, setAge] = useState(50);
|
||
const [name, setName] = useState('Taylor');
|
||
```
|
||
````
|
||
|
||
```js /useState/
|
||
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}
|
||
|
||
```
|
||
````
|
||
|
||
```ts showLineNumbers{20}
|
||
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
|
||
|
||
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.
|
||
|
||
`````
|
||
````
|
||
```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.
|