feat: add user-defined config for syntax highlighting plugin (#869)

* feat: add user-defined options to syntax highlighting plugin

* feat: add default syntax highlighting config to `quartz.config.ts`

* chore: refactor according to @aarnphm's review

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* chore: run Prettier on `quartz/plugins/transformers/syntax.ts`

* Update quartz/plugins/transformers/syntax.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update syntax.ts

---------

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Silviu Lorenț 2024-02-17 20:23:45 +02:00 committed by GitHub
parent 5af707ea20
commit fa2ea2896f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 40 additions and 18 deletions

View file

@ -53,7 +53,16 @@ const config: QuartzConfig = {
priority: ["frontmatter", "filesystem"],
}),
Plugin.Latex({ renderEngine: "katex" }),
Plugin.SyntaxHighlighting(),
Plugin.SyntaxHighlighting({
// uses themes bundled with Shikiji, see https://shikiji.netlify.app/themes
theme: {
light: "github-light",
dark: "github-dark",
},
// set this to 'true' to use the background color of the Shikiji theme
// if set to 'false', will use Quartz theme colors for background
keepBackground: false,
}),
Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
Plugin.GitHubFlavoredMarkdown(),
Plugin.TableOfContents(),

View file

@ -1,20 +1,33 @@
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 const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
interface Theme extends Record<string, CodeTheme> {
light: CodeTheme
dark: CodeTheme
}
interface Options {
theme?: Theme
keepBackground?: boolean
}
const defaultOptions: Options = {
theme: {
light: "github-light",
dark: "github-dark",
},
keepBackground: false,
}
export const SyntaxHighlighting: QuartzTransformerPlugin<Options> = (
userOpts?: Partial<Options>,
) => {
const opts: Partial<CodeOptions> = { ...defaultOptions, ...userOpts }
return {
name: "SyntaxHighlighting",
htmlPlugins() {
return [
[
rehypePrettyCode,
{
keepBackground: false,
theme: {
dark: "github-dark",
light: "github-light",
return [[rehypePrettyCode, opts]]
},
} satisfies Partial<CodeOptions>,
],
]
},
})
}
}