| | |
|---|
| | | --- |
|---|
| | | title: Syntax Highlighting |
|---|
| | | tags: |
|---|
| | | - plugin/transformer |
|---|
| | | - 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. |
|---|
| | |
|---|
| | | const [name, setName] = useState("Taylor") |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Inline Highlighting |
|---|
| | | |
|---|
| | | Append {:lang} to the end of inline code to highlight it like a regular code block. |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | This is an array `[1, 2, 3]{:js}` of numbers 1 through 3. |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | This is an array `[1, 2, 3]{:js}` of numbers 1 through 3. |
|---|
| | | |
|---|
| | | ### Line numbers |
|---|
| | | |
|---|
| | | Syntax highlighting has line numbers configured automatically. If you want to start line numbers at a specific number, use `showLineNumbers{number}`: |
|---|
| | |
|---|
| | | |
|---|
| | | ## 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` |
|---|
| | | Syntax highlighting is a functionality of the [[SyntaxHighlighting]] plugin. See the plugin page for customization options. |
|---|
