feat:#1 更好Markdown为Lute并使用前端渲染

Author: terwer

lib/markdownUtil.ts

@@ -1,11 +1,39 @@
-import Showdown from "showdown"
-
-const converter = new Showdown.Converter({tables: true});
+// import Showdown from "showdown"
+// const converter = new Showdown.Converter({tables: true});
 
 /**
  * 渲染Markdown
  * @param md
  */
 export function renderHTML(md: string) {
-    return converter.makeHtml(md);
+    // @ts-ignore
+    const lute = Lute.New()
+    // const renderers = {
+    //     renderText: (node:any, entering:any) => {
+    //         if (entering) {
+    //             console.log("    render text")
+    //             // @ts-ignore
+    //             return [node.Text() + " via Lute", Lute.WalkContinue]
+    //         }
+    //         // @ts-ignore
+    //         return ["", Lute.WalkContinue]
+    //     },
+    //     renderStrong: (node:any, entering:any) => {
+    //         entering ? console.log("    start render strong") : console.log("    end render strong")
+    //         // @ts-ignore
+    //         return ["", Lute.WalkContinue]
+    //     },
+    //     renderParagraph: (node:any, entering:any) => {
+    //         entering ? console.log("    start render paragraph") : console.log("    end render paragraph")
+    //         // @ts-ignore
+    //         return ["", Lute.WalkContinue]
+    //     }
+    // }
+    // lute.SetJSRenderers({
+    //     renderers: {
+    //         Md2HTML: renderers
+    //     },
+    // })
+    // return converter.makeHtml(md);
+    return lute.MarkdownStr("", md)
 }

lib/platform/metaweblog/metaweblogApi.ts

@@ -146,9 +146,9 @@ export class MetaWeblogApi {
         const postStruct = ret.params.param.value || []
         const post = this.parsePost(postStruct)
 
-        let htmlContent = renderHTML(post.description)
-        htmlContent = prettyHtml(htmlContent)
-        post.description = htmlContent
+        // let htmlContent = renderHTML(post.description)
+        // htmlContent = prettyHtml(htmlContent)
+        // post.description = htmlContent
 
         return Promise.resolve(post)
     }

lib/platform/siyuan/siYuanApiAdaptor.ts

@@ -106,8 +106,9 @@ export class SiYuanApiAdaptor implements IApi {
         const shortDesc = attrs["custom-desc"] || ""
 
         // 渲染Markdown
-        let htmlContent = renderHTML(md.content)
-        htmlContent = prettyHtml(htmlContent)
+        // let htmlContent = renderHTML(md.content)
+        // htmlContent = prettyHtml(htmlContent)
+        let mdContent = md.content
 
         let title = siyuanPost.content || ""
         title = removeTitleNumber(title)
@@ -116,7 +117,7 @@ export class SiYuanApiAdaptor implements IApi {
         let commonPost = new Post()
         commonPost.postid = siyuanPost.root_id || ""
         commonPost.title = title
-        commonPost.description = htmlContent || ""
+        commonPost.description = mdContent || ""
         commonPost.shortDesc = shortDesc || ""
         commonPost.mt_keywords = attrs.tags || ""
         commonPost.isPublished = isPublished

lib/strUtil.ts

@@ -0,0 +1,10 @@
+/**
+ * @function unescapeHTML 还原html脚本 < > & " '
+ * @param a -
+ *            字符串
+ */
+export const unescapeHTML = function (a: string) {
+    a = "" + a;
+    return a.replace(/\&amp;/g, "&").replace(/\&lt;/g, "<")
+        .replace(/\&gt;/g, ">")
+}

nuxt.config.ts

@@ -1,8 +1,19 @@
-import {defineNuxtConfig} from 'nuxt'
+import {defineNuxtConfig} from 'nuxt/config'
 import ElementPlus from 'unplugin-element-plus/vite'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+    app: {
+        head: {
+            script: [
+                {
+                    src: "/lute.min.js",
+                },
+            ],
+        },
+    },
+
+
     // meta
     meta: {
         title: 'Element Plus + Nuxt 3',

package.json

@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "@pinia/nuxt": "^0.4.3",
-    "@types/showdown": "^2.0.0",
     "@types/xmlrpc": "^1.3.7",
     "@unocss/nuxt": "^0.45.29",
     "@vueuse/nuxt": "^9.3.0",
@@ -31,7 +30,6 @@
     "element-plus": "^2.2.15",
     "highlight.js": "^11.6.0",
     "pinia": "^2.0.23",
-    "showdown": "^2.1.0",
     "vue": "^3.2.40",
     "xmlrpc": "^1.3.2"
   }

plugins/hljs/codecopy/index.js

@@ -4,6 +4,8 @@
  *  @copyright Copyright 2021. All rights reserved.
  */
 
+import {unescapeHTML} from "~/lib/strUtil";
+
 /**
  * Adds a copy button to highlightjs code blocks
  */
@@ -40,7 +42,7 @@ export class CopyButtonPlugin {
         button.onclick = function () {
             if (!navigator.clipboard) return;
 
-            let newText = text;
+            let newText = unescapeHTML(text);
             // @ts-ignore
             // eslint-disable-next-line no-undef
             // if (hook && typeof hook === "function") {

plugins/hljs/vue-hljs/main.js

@@ -2,6 +2,9 @@ import Hljs from "highlight.js";
 import {CopyButtonPlugin} from "../codecopy";
 import "../codecopy/codecopy.css";
 import "./vs.css";
+import {renderHTML} from "~/lib/markdownUtil";
+import {unescapeHTML} from "~/lib/strUtil";
+import logUtil from "~/lib/logUtil";
 
 const vueHljs = {};
 
@@ -12,9 +15,25 @@ vueHljs.install = Vue => {
     );
 
     Vue.directive("highlight", el => {
+        const html = renderHTML(el.innerHTML)
+        // console.log(html)
+        el.innerHTML = html;
+
         const blocks = el.querySelectorAll("pre code");
         Array.prototype.forEach.call(blocks, Hljs.highlightBlock);
 
+        // 取消转义
+        Array.prototype.forEach.call(blocks, function (bel) {
+            const bclass = bel.getAttribute("class");
+            console.log(bclass)
+            let newHtml = bel.innerHTML
+            // console.log(newHtml)
+
+            newHtml = unescapeHTML(newHtml)
+            bel.innerHTML = newHtml
+            // console.log(newHtml)
+        })
+
         // 代码选项卡
         // 代码块
         const codeGroups = el.querySelectorAll("code-group");

public/lute.min.js

@@ -759,11 +759,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/showdown@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.npmmirror.com/@types/showdown/-/showdown-2.0.0.tgz#3e800eca8573848cac4e5555f4377ba3a0e7b1f2"
-  integrity sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==
-
 "@types/web-bluetooth@^0.0.15":
   version "0.0.15"
   resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz#d60330046a6ed8a13b4a53df3813c44942ebdf72"
@@ -1636,11 +1631,6 @@ commander@^8.0.0:
   resolved "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
-commander@^9.0.0:
-  version "9.4.0"
-  resolved "https://registry.npmmirror.com/commander/-/commander-9.4.0.tgz#bc4a40918fefe52e22450c111ecd6b7acce6f11c"
-  integrity sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==
-
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -4180,13 +4170,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-showdown@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmmirror.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
-  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
-  dependencies:
-    commander "^9.0.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.7"
   resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"