feat: support KaTex in notes (#2024)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: kermanx

packages/slidev/node/options.ts

@@ -9,6 +9,7 @@ import { getThemeMeta, resolveTheme } from './integrations/themes'
 import { parser } from './parser'
 import { getRoots, resolveEntry, toAtFS } from './resolver'
 import setupIndexHtml from './setups/indexHtml'
+import setupKatex from './setups/katex'
 import setupShiki from './setups/shiki'
 
 const debug = Debug('slidev:options')
@@ -82,6 +83,7 @@ export async function createDataUtils(resolved: Omit<ResolvedSlidevOptions, 'uti
 
   return {
     ...await setupShiki(resolved.roots),
+    katexOptions: await setupKatex(resolved.roots),
     indexHtml: setupIndexHtml(resolved),
     define: getDefine(resolved),
     iconsResolvePath: [resolved.clientRoot, ...resolved.roots].reverse(),

packages/slidev/node/syntax/markdown-it/index.ts

@@ -5,15 +5,14 @@ import { taskLists as MarkdownItTaskList } from '@hedgedoc/markdown-it-plugins'
 // @ts-expect-error missing types
 import MarkdownItFootnote from 'markdown-it-footnote'
 import MarkdownItMdc from 'markdown-it-mdc'
-import setupKatex from '../../setups/katex'
 import MarkdownItEscapeInlineCode from './markdown-it-escape-code'
 import MarkdownItKatex from './markdown-it-katex'
 import MarkdownItLink from './markdown-it-link'
 import MarkdownItShiki from './markdown-it-shiki'
 import MarkdownItVDrag from './markdown-it-v-drag'
 
 export async function useMarkdownItPlugins(md: MarkdownIt, options: ResolvedSlidevOptions, markdownTransformMap: Map<string, MagicString>) {
-  const { roots, data: { features, config } } = options
+  const { data: { features, config }, utils: { katexOptions } } = options
 
   if (config.highlighter === 'shiki') {
     md.use(await MarkdownItShiki(options))
@@ -24,7 +23,7 @@ export async function useMarkdownItPlugins(md: MarkdownIt, options: ResolvedSlid
   md.use(MarkdownItFootnote)
   md.use(MarkdownItTaskList, { enabled: true, lineNumber: true, label: true })
   if (features.katex)
-    md.use(MarkdownItKatex, await setupKatex(roots))
+    md.use(MarkdownItKatex, katexOptions)
   md.use(MarkdownItVDrag, markdownTransformMap)
   if (config.mdc)
     md.use(MarkdownItMdc)

packages/slidev/node/vite/loaders.ts

@@ -4,9 +4,11 @@ import type { Plugin, ViteDevServer } from 'vite'
 import { notNullish, range } from '@antfu/utils'
 import * as parser from '@slidev/parser/fs'
 import equal from 'fast-deep-equal'
+import MarkdownIt from 'markdown-it'
 import YAML from 'yaml'
-import { sharedMd } from '../commands/shared'
 import { createDataUtils } from '../options'
+import MarkdownItKatex from '../syntax/markdown-it/markdown-it-katex'
+import markdownItLink from '../syntax/markdown-it/markdown-it-link'
 import { getBodyJson, updateFrontmatterPatch } from '../utils'
 import { templates } from '../virtual'
 import { templateConfigs } from '../virtual/configs'
@@ -16,32 +18,17 @@ import { templateSlides, VIRTUAL_SLIDE_PREFIX } from '../virtual/slides'
 import { templateTitleRendererMd } from '../virtual/titles'
 import { regexSlideFacadeId, regexSlideReqPath, regexSlideSourceId } from './common'
 
-function renderNote(text: string = '') {
-  let clickCount = 0
-  const html = sharedMd.render(text
-    // replace [click] marker with span
-    .replace(/\[click(?::(\d+))?\]/gi, (_, count = 1) => {
-      clickCount += Number(count)
-      return `<span class="slidev-note-click-mark" data-clicks="${clickCount}"></span>`
-    }),
-  )
-
-  return html
-}
-
-function withRenderedNote(data: SlideInfo): SlideInfo {
-  return {
-    ...data,
-    noteHTML: renderNote(data?.note),
-  }
-}
-
 export function createSlidesLoader(
   options: ResolvedSlidevOptions,
   serverOptions: SlidevServerOptions,
 ): Plugin {
   const { data, mode, utils } = options
 
+  const notesMd = MarkdownIt({ html: true })
+  notesMd.use(markdownItLink)
+  if (data.features.katex)
+    notesMd.use(MarkdownItKatex, utils.katexOptions)
+
   const hmrSlidesIndexes = new Set<number>()
   let server: ViteDevServer | undefined
   let skipHmr: { filePath: string, fileContent: string } | null = null
@@ -374,4 +361,24 @@ export function createSlidesLoader(
         return ''
     },
   }
+
+  function renderNote(text: string = '') {
+    let clickCount = 0
+    const html = notesMd.render(text
+    // replace [click] marker with span
+      .replace(/\[click(?::(\d+))?\]/gi, (_, count = 1) => {
+        clickCount += Number(count)
+        return `<span class="slidev-note-click-mark" data-clicks="${clickCount}"></span>`
+      }),
+    )
+
+    return html
+  }
+
+  function withRenderedNote(data: SlideInfo): SlideInfo {
+    return {
+      ...data,
+      noteHTML: renderNote(data?.note),
+    }
+  }
 }

packages/types/src/options.ts

@@ -1,4 +1,5 @@
 import type { MarkdownItShikiOptions } from '@shikijs/markdown-it/index.mjs'
+import type { KatexOptions } from 'katex'
 import type { HighlighterGeneric } from 'shiki/types.mjs'
 import type { SlidevData } from './types'
 
@@ -58,6 +59,7 @@ export interface ResolvedSlidevOptions extends RootsInfo, SlidevEntryOptions {
 export interface ResolvedSlidevUtils {
   shiki: HighlighterGeneric<any, any>
   shikiOptions: MarkdownItShikiOptions
+  katexOptions: KatexOptions | null
   indexHtml: string
   define: Record<string, string>
   iconsResolvePath: string[]