feat: implement factory function for MarkdownIt with math and container support

Author: Simon-He95

packages/markdown-parser/src/getMarkdown.ts renamed to packages/markdown-parser/src/factory.ts

@@ -5,14 +5,14 @@ import { applyContainers } from './plugins/containers'
 import { applyMath } from './plugins/math'
 import { applyRenderRules } from './renderers'
 
-export interface GetMarkdownOptions extends Record<string, any> {
+export interface FactoryOptions extends Record<string, any> {
   markdownItOptions?: Record<string, any>
   enableMath?: boolean
   enableContainers?: boolean
   mathOptions?: { commands?: string[], escapeExclamation?: boolean }
 }
 
-export function getMarkdown(opts: GetMarkdownOptions = {}): MarkdownIt {
+export function factory(opts: FactoryOptions = {}): MarkdownIt {
   const md = new MarkdownIt({
     html: true,
     linkify: true,

packages/markdown-parser/src/index.ts

@@ -1,13 +1,14 @@
+import type { FactoryOptions } from './factory'
 import MarkdownIt from 'markdown-it'
 import { full as markdownItEmoji } from 'markdown-it-emoji'
 import markdownItFootnote from 'markdown-it-footnote'
 import markdownItIns from 'markdown-it-ins'
 import markdownItMark from 'markdown-it-mark'
 import markdownItSub from 'markdown-it-sub'
 import markdownItSup from 'markdown-it-sup'
-import * as markdownItCheckbox from 'markdown-it-task-checkbox'
 
-import { getMarkdown as factory } from './getMarkdown'
+import * as markdownItCheckbox from 'markdown-it-task-checkbox'
+import { factory } from './factory'
 import {
   parseInlineTokens,
   parseMarkdownToStructure,
@@ -33,7 +34,7 @@ export { applyMath, KATEX_COMMANDS, normalizeStandaloneBackslashT } from './plug
 // Re-export the node types for backward compatibility
 export * from './types'
 
-export interface GetMarkdownOptions {
+export interface GetMarkdownOptions extends FactoryOptions {
   plugin?: Array<any>
   apply?: Array<(md: MarkdownIt) => void>
   /**
@@ -45,7 +46,7 @@ export interface GetMarkdownOptions {
 
 export function getMarkdown(msgId: string = `editor-${Date.now()}`, options: GetMarkdownOptions = {}) {
   // keep legacy behaviour but delegate to new factory and reapply project-specific rules
-  const md = factory({})
+  const md = factory(options)
 
   // Setup i18n translator function
   const defaultTranslations: Record<string, string> = {

playground/src/pages/markdown.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Highlighter } from 'shiki'
+import type { Highlighter, ThemeInput } from 'shiki'
 import { Icon } from '@iconify/vue'
 import katex from 'katex'
-import { disposeHighlighter, registerHighlight } from '../../../src/components/MarkdownCodeBlockNode/highlight'
+import { defaultLanguages, registerHighlight } from 'stream-markdown'
+import { getMarkdown } from '../../../packages/markdown-parser'
 import { languageMap } from '../../../src/utils'
-import { getMarkdown } from '../../../src/utils/markdown/getMarkdown'
 import { streamContent } from '../const/markdown'
 // 每隔 10 毫秒输出一部分内容
 const content = ref<string>('')
@@ -25,7 +25,8 @@ useInterval(16, {
 
 const highlighter = ref<Highlighter | null>(null)
 const selectedTheme = ref('vitesse-dark')
-const md = getMarkdown({
+
+const md = getMarkdown('hi', {
   markdownItOptions: {
     highlight: (str: string, lang: string) => {
       const _lang = lang.split(':')[0] || 'plaintext'
@@ -38,17 +39,26 @@ const md = getMarkdown({
   },
 })
 md.renderer.rules.math_inline = (tokens: any[], index: number) => {
-  const rendered = katex.renderToString(tokens[index].content, { throwOnError: false })
+  const rendered = katex.renderToString(tokens[index].content, { throwOnError: false, strict: 'ignore' })
   if (rendered)
     return `<span class="math-inline">${rendered}</span>`
   return `<span class="math-inline">${tokens[index].content}</span>`
 }
 md.renderer.rules.math_block = (tokens: any[], index: number) => {
-  const rendered = katex.renderToString(tokens[index].content, { throwOnError: false, displayMode: true })
+  const rendered = katex.renderToString(tokens[index].content, { throwOnError: false, displayMode: true, strict: 'ignore' })
   if (rendered)
     return `<div class="math-block my-4">${rendered}</div>`
   return `<div class="math-block my-4">${tokens[index].content}</div>`
 }
+md.renderer.rules.fence = (tokens, idx) => {
+  const token = tokens[idx]
+  const langInfo = token.info ? token.info.trim() : ''
+  const lang = langInfo.split(':')[0] || 'plaintext'
+  if (highlighter.value) {
+    return highlighter.value.codeToHtml(token.content, { lang: defaultLanguages.includes(lang) ? lang : 'plaintext', theme: selectedTheme.value })
+  }
+  return `<pre><code class="language-${lang}">${token.content}</code></pre>`
+}
 
 const html = computed(() => md.render(content.value))
 // 主题切换
@@ -120,10 +130,12 @@ const themes = [
 
 if (typeof window !== 'undefined') {
   watch(() => selectedTheme.value, async (newThemes) => {
-    disposeHighlighter()
-    highlighter.value = await registerHighlight({
-      themes: [newThemes] as any,
-    })
+    if (!highlighter.value) {
+      highlighter.value = await registerHighlight({
+        themes: themes as ThemeInput[],
+      })
+    }
+    highlighter.value?.loadTheme(newThemes as ThemeInput)
   }, { immediate: true })
 }
 // 格式化主题名称显示