feat: support Mermaid and Katex (doocs#250)

--------- Co-authored-by: hoollyzhang <[email protected]>
theosunny · Nov 4, 2023 · 192c787 · 192c787
1 parent 806c4c0
commit 192c787
Show file tree

Hide file tree

Showing 9 changed files with 1,296 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "form-data": "4.0.0",
     "highlight.js": "^11.6.0",
     "juice": "^8.0.0",
+    "katex": "^0.16.9",
     "marked": "^4.0.18",
     "minio": "7.0.33",
     "node-fetch": "^3.2.10",

diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,9 @@
       href="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/styles.css"
     />
     <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/prettify/r298/prettify.min.js"></script>
+
+    <!-- KaTeX CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
   </head>
 
   <body>
@@ -39,5 +42,11 @@
     <!-- built files will be auto injected -->
   </body>
   <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/main.js"></script>
+  <!-- 支持一下  mermaid -->
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true });
+    window.mermaid = mermaid;
+  </script>
 </html>
 
diff --git a/src/assets/example/theme-css.txt b/src/assets/example/theme-css.txt
@@ -1,5 +1,5 @@
 /*
-  按Ctrl+F可格式化
+  按Ctrl/Command+F可格式化
 */
 /* 一级标题样式 */
 h1 {

diff --git a/src/assets/scripts/config.js b/src/assets/scripts/config.js
@@ -54,6 +54,7 @@ export default {
       value: `rgba(250, 81, 81, 1)`,
       desc: `热情活泼`,
     },
+    // { label: `微信绿`, value: `rgb(26, 173, 25,1)`, desc: `经典微信绿` },
   ],
   codeThemeOption: [
     {

diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js
@@ -1,6 +1,6 @@
 import { Renderer } from "marked";
-import hljs from 'highlight.js';
-
+import hljs from "highlight.js";
+import katex from "katex";
 class WxRenderer {
   constructor(opts) {
     this.opts = opts;
@@ -23,7 +23,7 @@ class WxRenderer {
         }
       }
 
-      let base_block = merge(base,  {});
+      let base_block = merge(base, {});
       for (let ele in themeTpl.block) {
         if (themeTpl.block.hasOwnProperty(ele)) {
           let style = themeTpl.block[ele];
@@ -121,24 +121,37 @@ class WxRenderer {
         return `<blockquote ${getStyles("blockquote")}>${text}</blockquote>`;
       };
       renderer.code = (text, lang) => {
-        lang = hljs.getLanguage(lang) ? lang : 'plaintext';
-
-        text = hljs.highlight(text, {language: lang}).value;
-
-        text = text.replace(/\r\n/g,"<br/>")
-                   .replace(/\n/g,"<br/>")
-                   .replace(/(>[^<]+)|(^[^<]+)/g, function(str) {
-                     return str.replace(/\s/g, '&nbsp;')
-                   });
-
-        return `<pre class="hljs code__pre" ${getStyles("code_pre")}><code class="prettyprint language-${lang}" ${getStyles("code")}>${text}</code></pre>`
+        if (lang === "katex") {
+          const html = katex.renderToString(text);
+          return `${html}`;
+        }
+        if (lang.startsWith("mermaid")) {
+          setTimeout(() => {
+            window.mermaid?.run();
+          }, 0);
+          return `<center><pre class="mermaid">${text}</pre></center>`;
+        }
+        lang = hljs.getLanguage(lang) ? lang : "plaintext";
+
+        text = hljs.highlight(text, { language: lang }).value;
+
+        text = text
+          .replace(/\r\n/g, "<br/>")
+          .replace(/\n/g, "<br/>")
+          .replace(/(>[^<]+)|(^[^<]+)/g, function (str) {
+            return str.replace(/\s/g, "&nbsp;");
+          });
+
+        return `<pre class="hljs code__pre" ${getStyles(
+          "code_pre"
+        )}><code class="prettyprint language-${lang}" ${getStyles(
+          "code"
+        )}>${text}</code></pre>`;
       };
       renderer.codespan = (text, lang) =>
         `<code ${getStyles("codespan")}>${text}</code>`;
       renderer.listitem = (text) =>
-        `<li ${getStyles(
-          "listitem"
-        )}><span><%s/></span>${text}</li>`;
+        `<li ${getStyles("listitem")}><span><%s/></span>${text}</li>`;
 
       renderer.list = (text, ordered, start) => {
         text = text.replace(/<\/*p .*?>/g, "").replace(/<\/*p>/g, "");

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -203,27 +203,27 @@ export default {
       formatItems: [
         {
           label: `加粗`,
-          kbd: `Ctrl + B`,
+          kbd: `Ctrl/Command + B`,
           emitArgs: [`addFormat`, `**`],
         },
         {
           label: `斜体`,
-          kbd: `Ctrl + I`,
+          kbd: `Ctrl/Command + I`,
           emitArgs: [`addFormat`, `*`],
         },
         {
           label: `删除线`,
-          kbd: `Alt + Shift + U`,
+          kbd: `Ctrl/Command + D`,
           emitArgs: [`addFormat`, `~~`],
         },
         {
           label: `超链接`,
-          kbd: `Alt + Shift + K`,
+          kbd: `Ctrl/Command + K`,
           emitArgs: [`addFormat`, `[`, `]()`],
         },
         {
           label: `格式化`,
-          kbd: `Alt + Shift + L`,
+          kbd: `Ctrl/Command + F`,
           emitArgs: [`formatContent`],
         },
       ],

diff --git a/src/stores/index.js b/src/stores/index.js
@@ -8,6 +8,10 @@ import DEFAULT_CONTENT from '@/assets/example/markdown.md'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
 import { setColor, formatDoc, formatCss } from '@/assets/scripts/util'
 
+const defaultKeyMap = CodeMirror.keyMap[`default`]
+const modPrefix =
+  defaultKeyMap === CodeMirror.keyMap[`macDefault`] ? `Cmd` : `Ctrl`
+
 export const useStore = defineStore(`store`, {
   state: () => ({
     wxRenderer: null,
@@ -88,9 +92,6 @@ export const useStore = defineStore(`store`, {
         editorDom.value =
           localStorage.getItem(`__editor_content`) || formatDoc(DEFAULT_CONTENT)
       }
-      const defaultKeyMap = CodeMirror.keyMap[`default`]
-      const modPrefix =
-        defaultKeyMap === CodeMirror.keyMap[`macDefault`] ? `Cmd` : `Ctrl`
       this.editor = CodeMirror.fromTextArea(editorDom, {
         mode: `text/x-markdown`,
         theme: `xq-light`,
@@ -104,7 +105,7 @@ export const useStore = defineStore(`store`, {
             localStorage.setItem(`__editor_content`, doc)
             editor.setValue(doc)
           },
-          [[`${modPrefix}-B`]]: function bold(editor) {
+          [`${modPrefix}-B`]: function bold(editor) {
             const selected = editor.getSelection()
             editor.replaceSelection(`**${selected}**`)
           },
@@ -116,6 +117,10 @@ export const useStore = defineStore(`store`, {
             const selected = editor.getSelection()
             editor.replaceSelection(`*${selected}*`)
           },
+          [`${modPrefix}-K`]: function italic(editor) {
+            const selected = editor.getSelection()
+            editor.replaceSelection(`[${selected}]()`)
+          },
           [`${modPrefix}-L`]: function code(editor) {
             const selected = editor.getSelection()
             editor.replaceSelection(`\`${selected}\``)
@@ -138,12 +143,12 @@ export const useStore = defineStore(`store`, {
         matchBrackets: true,
         autofocus: true,
         extraKeys: {
-          'Ctrl-F': function autoFormat(editor) {
+          [`${modPrefix}-F`]: function autoFormat(editor) {
             const doc = formatCss(editor.getValue(0))
             localStorage.setItem(`__css_content`, doc)
             editor.setValue(doc)
           },
-          'Ctrl-S': function save(editor) {},
+          [`${modPrefix}-S`]: function save(editor) {},
         },
       })
     },

diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    class="container"
-    :class="{ container_night: nightMode }"
-    @keydown.alt.shift.k="addFormat('[', ']()')"
-    @keydown.alt.shift.u="addFormat('~~')"
-    @keydown.ctrl.alt.l="formatContent()"
-  >
+  <div class="container" :class="{ container_night: nightMode }">
     <el-container>
       <el-header class="editor__header">
         <editor-header