| | |
| | | import { PluggableList } from "unified" |
| | | import { QuartzTransformerPlugin } from "../types" |
| | | import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code" |
| | | import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code" |
| | | |
| | | export class SyntaxHighlighting extends QuartzTransformerPlugin { |
| | | name = "SyntaxHighlighting" |
| | | interface Theme extends Record<string, CodeTheme> { |
| | | light: CodeTheme |
| | | dark: CodeTheme |
| | | } |
| | | |
| | | markdownPlugins(): PluggableList { |
| | | return [] |
| | | } |
| | | interface Options { |
| | | theme?: Theme |
| | | keepBackground?: boolean |
| | | } |
| | | |
| | | 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>]] |
| | | const defaultOptions: Options = { |
| | | theme: { |
| | | light: "github-light", |
| | | dark: "github-dark", |
| | | }, |
| | | keepBackground: false, |
| | | } |
| | | |
| | | export const SyntaxHighlighting: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => { |
| | | const opts: CodeOptions = { ...defaultOptions, ...userOpts } |
| | | |
| | | return { |
| | | name: "SyntaxHighlighting", |
| | | htmlPlugins() { |
| | | return [[rehypePrettyCode, opts]] |
| | | }, |
| | | } |
| | | } |