* 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>
		
			
				
	
	
		
			34 lines
		
	
	
		
			735 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			34 lines
		
	
	
		
			735 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
import { QuartzTransformerPlugin } from "../types"
 | 
						|
import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code"
 | 
						|
 | 
						|
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, opts]]
 | 
						|
    },
 | 
						|
  }
 | 
						|
}
 |