From de8bfcd539e11571d9b675b87b90b0e449ae62e6 Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Sun, 27 Jun 2021 00:46:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=20Katex=20=E8=A1=8C?=
 =?UTF-8?q?=E5=86=85=E5=85=AC=E5=BC=8F=E5=92=8C=20markdown-it-attrs=20?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/Preview.vue           | 13 +------------
 src/renderer/plugins/markdown-it-katex.ts     | 17 +++++++++++------
 src/renderer/plugins/markdown-render-vnode.ts |  5 ++++-
 src/renderer/useful/markdown.ts               | 15 +++++++++++++++
 4 files changed, 31 insertions(+), 19 deletions(-)
 create mode 100644 src/renderer/useful/markdown.ts

diff --git a/src/renderer/components/Preview.vue b/src/renderer/components/Preview.vue
index 7689c14d..a3cf192d 100644
--- a/src/renderer/components/Preview.vue
+++ b/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 },
diff --git a/src/renderer/plugins/markdown-it-katex.ts b/src/renderer/plugins/markdown-it-katex.ts
index cf82ce32..04b49380 100644
--- a/src/renderer/plugins/markdown-it-katex.ts
+++ b/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
diff --git a/src/renderer/plugins/markdown-render-vnode.ts b/src/renderer/plugins/markdown-render-vnode.ts
index a2e99959..827bcca9 100644
--- a/src/renderer/plugins/markdown-render-vnode.ts
+++ b/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
diff --git a/src/renderer/useful/markdown.ts b/src/renderer/useful/markdown.ts
new file mode 100644
index 00000000..b152f8d8
--- /dev/null
+++ b/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