syntax higlighting

quartz/plugins/transformers/index.ts

@@ -5,3 +5,4 @@ export { Katex } from './latex'
 export { Description } from './description'
 export { ResolveLinks } from './links'
 export { ObsidianFlavoredMarkdown } from './ofm'
+export { SyntaxHighlighting } from './syntax'

quartz/plugins/transformers/syntax.ts

@@ -0,0 +1,28 @@
+import { PluggableList } from "unified"
+import { QuartzTransformerPlugin } from "../types"
+import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
+
+export class SyntaxHighlighting extends QuartzTransformerPlugin {
+  name = "SyntaxHighlighting"
+
+  markdownPlugins(): PluggableList {
+    return []
+  }
+
+  htmlPlugins(): PluggableList {
+    return [[rehypePrettyCode, {
+      theme: 'css-variables',
+      onVisitLine(node) {
+        if (node.children.length === 0) {
+          node.children = [{ type: 'text', value: ' ' }]
+        }
+      },
+      onVisitHighlightedLine(node) {
+        node.properties.className.push('highlighted')
+      },
+      onVisitHighlightedWord(node) {
+        node.properties.className = ['word']
+      },
+    } satisfies Partial<CodeOptions>]]
+  }
+}