fix: 修正 Katex 行内公式和 markdown-it-attrs 插件冲突问题

src/renderer/components/Preview.vue

@@ -43,28 +43,17 @@
 import { debounce } from 'lodash-es'
 import { useStore } from 'vuex'
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
-import Markdown from 'markdown-it'
-import MarkdownItAttrs from 'markdown-it-attrs'
-import MultimdTable from 'markdown-it-multimd-table'
 
 import file from '@fe/useful/file'
 import { triggerHook } from '@fe/useful/plugin'
-import { getPlugins as getMarkdownItPlugins } from '@fe/useful/plugin/markdown'
 import { useBus } from '@fe/useful/bus'
+import markdown from '@fe/useful/markdown'
 import Render from './Render.vue'
 
 import 'github-markdown-css/github-markdown.css'
 import 'highlight.js/styles/atom-one-dark.css'
 import 'katex/dist/katex.min.css'
 
-const markdown = Markdown({ linkify: true, breaks: true, html: true, })
-  .use(MarkdownItAttrs)
-  .use(MultimdTable, { multiline: true })
-
-getMarkdownItPlugins().forEach(({ plugin, params }) => {
-  markdown.use(plugin, params)
-})
-
 export default defineComponent({
   name: 'xview',
   components: { Render },

src/renderer/plugins/markdown-it-katex.ts

@@ -14,6 +14,7 @@ for rendering output.
 
 import katex from 'katex'
 import { Plugin } from '@fe/useful/plugin'
+import { h } from 'vue'
 
 // Test if potential opening or closing delimieter
 // Assumes that there is a "$" at state.src[pos]
@@ -97,6 +98,11 @@ function math_inline (state: any, silent: boolean) {
     token = state.push('math_inline', 'math', 0)
     token.markup = '$'
     token.content = state.src.slice(start, match)
+
+    // 如果本行字符串以 $ 结尾，避免 markdown-it-attrs 解析，插入一个空白节点
+    if (state.src.endsWith('$')) {
+      state.push('text', '', 0)
+    }
   }
 
   state.pos = match + 1
@@ -164,8 +170,8 @@ function math_plugin (md: any, options: any) {
     try {
       return katex.renderToString(latex, options)
     } catch (error) {
-      if (options.throwOnError) { console.log(error) }
-      return latex
+      if (options.throwOnError) { console.error(error) }
+      return h('code', {}, `${error.message} [${latex}]`)
     }
   }
 
@@ -178,9 +184,8 @@ function math_plugin (md: any, options: any) {
     try {
       return '<p>' + katex.renderToString(latex, options) + '</p>'
     } catch (error) {
-      console.log(error)
-      if (options.throwOnError) { console.log(error) }
-      return latex
+      if (options.throwOnError) { console.error(error) }
+      return h('code', {}, `${error.message} [${latex}]`)
     }
   }
 
@@ -199,6 +204,6 @@ function math_plugin (md: any, options: any) {
 export default {
   name: 'markdown-toc',
   register: ctx => {
-    ctx.markdown.registerPlugin(math_plugin)
+    ctx.markdown.registerPlugin(math_plugin, { throwOnError: true })
   }
 } as Plugin

src/renderer/plugins/markdown-render-vnode.ts

@@ -4,6 +4,7 @@ import Renderer from 'markdown-it/lib/renderer'
 import { escapeHtml, unescapeAll } from 'markdown-it/lib/common/utils'
 import { Plugin } from '@fe/useful/plugin'
 
+const attrNameReg = /^[a-zA-Z_:][a-zA-Z0-9:._-]*/
 const defaultRules = {} as any
 
 defaultRules.code_inline = function (tokens: Token[], idx: number, _: any, __: any, slf: Renderer) {
@@ -149,7 +150,9 @@ function renderAttrs (this: Renderer, token: Token) {
   const result: any = {}
 
   token.attrs.forEach(token => {
-    result[token[0]] = token[1]
+    if (attrNameReg.test(token[0])) {
+      result[token[0]] = token[1]
+    }
   })
 
   return result

src/renderer/useful/markdown.ts

@@ -0,0 +1,15 @@
+import Markdown from 'markdown-it'
+import MarkdownItAttrs from 'markdown-it-attrs'
+import MultimdTable from 'markdown-it-multimd-table'
+import { getPlugins as getMarkdownItPlugins } from '@fe/useful/plugin/markdown'
+
+const markdown = Markdown({ linkify: true, breaks: true, html: true })
+
+getMarkdownItPlugins().forEach(({ plugin, params }) => {
+  markdown.use(plugin, params)
+})
+
+markdown.use(MarkdownItAttrs)
+markdown.use(MultimdTable, { multiline: true })
+
+export default markdown