update logic to handle config reloads

src/node/markdown/markdown.ts

@@ -28,7 +28,7 @@ import type {
 import type { Logger } from 'vite'
 import { containerPlugin, type ContainerOptions } from './plugins/containers'
 import { gitHubAlertsPlugin } from './plugins/githubAlerts'
-import { highlight } from './plugins/highlight'
+import { highlight as createHighlighter } from './plugins/highlight'
 import { highlightLinePlugin } from './plugins/highlightLines'
 import { imagePlugin, type Options as ImageOptions } from './plugins/image'
 import { lineNumberPlugin } from './plugins/lineNumbers'
@@ -192,39 +192,35 @@ export interface MarkdownOptions extends Options {
 
 export type MarkdownRenderer = MarkdownIt
 
-/**
- * Keep a reference to the highlighter to avoid re-creating.
- *
- * This highlighter is used in the `createContentLoader` function so every time
- * this function is called, the highlighter will be re-created. At the end,
- * Shiki will slow down the build process because it must be a singleton.
- */
-let highlighter:
-  | ((str: string, lang: string, attrs: string) => string)
-  | null
-  | undefined
+let md: MarkdownRenderer | undefined
+let _disposeHighlighter: (() => void) | undefined
+
+export function disposeMdItInstance() {
+  if (md) {
+    md = undefined
+    _disposeHighlighter?.()
+  }
+}
 
-export const createMarkdownRenderer = async (
+export async function createMarkdownRenderer(
   srcDir: string,
   options: MarkdownOptions = {},
   base = '/',
   logger: Pick<Logger, 'warn'> = console
-): Promise<MarkdownRenderer> => {
+): Promise<MarkdownRenderer> {
+  if (md) return md
+
   const theme = options.theme ?? { light: 'github-light', dark: 'github-dark' }
   const codeCopyButtonTitle = options.codeCopyButtonTitle || 'Copy Code'
   const hasSingleTheme = typeof theme === 'string' || 'name' in theme
 
-  highlighter =
-    highlighter ||
-    options.highlight ||
-    (await highlight(theme, options, logger))
+  let [highlight, dispose] = options.highlight
+    ? [options.highlight, () => {}]
+    : await createHighlighter(theme, options, logger)
 
-  const md = MarkdownIt({
-    html: true,
-    linkify: true,
-    highlight: highlighter,
-    ...options
-  })
+  _disposeHighlighter = dispose
+
+  md = MarkdownIt({ html: true, linkify: true, highlight, ...options })
 
   md.linkify.set({ fuzzyLink: false })
   md.use(restoreEntities)

src/node/markdown/plugins/highlight.ts

@@ -23,7 +23,7 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 10)
  * 2. convert line numbers into line options:
  *    [{ line: number, classes: string[] }]
  */
-const attrsToLines = (attrs: string): TransformerCompactLineOption[] => {
+function attrsToLines(attrs: string): TransformerCompactLineOption[] {
   attrs = attrs.replace(/^(?:\[.*?\])?.*?([\d,-]+).*/, '$1').trim()
   const result: number[] = []
   if (!attrs) {
@@ -51,7 +51,7 @@ export async function highlight(
   theme: ThemeOptions,
   options: MarkdownOptions,
   logger: Pick<Logger, 'warn'> = console
-): Promise<(str: string, lang: string, attrs: string) => string> {
+): Promise<[(str: string, lang: string, attrs: string) => string, () => void]> {
   const {
     defaultHighlightLang: defaultLang = '',
     codeTransformers: userTransformers = []
@@ -95,7 +95,8 @@ export async function highlight(
   const lineNoRE = /:(no-)?line-numbers(=\d*)?$/
   const mustacheRE = /\{\{.*?\}\}/g
 
-  return (str: string, lang: string, attrs: string) => {
+  return [
+    (str: string, lang: string, attrs: string) => {
       const vPre = vueRE.test(lang) ? '' : 'v-pre'
       lang =
         lang
@@ -105,7 +106,7 @@ export async function highlight(
           .toLowerCase() || defaultLang
 
       if (lang) {
-      const langLoaded = highlighter.getLoadedLanguages().includes(lang as any)
+        const langLoaded = highlighter.getLoadedLanguages().includes(lang)
         if (!langLoaded && !isSpecialLang(lang)) {
           logger.warn(
             c.yellow(
@@ -183,5 +184,7 @@ export async function highlight(
       })
 
       return restoreMustache(highlighted)
-  }
+    },
+    highlighter.dispose
+  ]
 }

src/node/plugin.ts

@@ -16,6 +16,7 @@ import {
   resolveAliases
 } from './alias'
 import { resolvePages, resolveUserConfig, type SiteConfig } from './config'
+import { disposeMdItInstance } from './markdown/markdown'
 import {
   clearCache,
   createMarkdownToVueRenderFn,
@@ -388,6 +389,7 @@ export async function createVitePressPlugin(
           return
         }
 
+        disposeMdItInstance()
         clearCache()
         await recreateServer?.()
         return