feat: support custom code block theme (doocs#112)

close doocs#75
kzwhui · Dec 3, 2021 · fe4d6b0 · fe4d6b0
1 parent 10d5ce8
commit fe4d6b0
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 255 deletions.
diff --git a/.gitignore b/.gitignore
@@ -43,5 +43,8 @@ yarn-error.log*
 
 # mockm
 httpData
+
+package-lock.json
 public/upload/**
-!public/upload/*.gitkeep
+!public/upload/*.gitkeep
+
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "crypto-js": "^4.1.1",
     "element-ui": "^2.15.6",
     "form-data": "4.0.0",
+    "highlight.js": "^11.3.1",
     "jquery": "^3.6.0",
     "juice": "^8.0.0",
     "marked": "^4.0.5",
@@ -39,6 +40,7 @@
     "@vue/cli-service": "~4.5.15",
     "async-validator": "^4.0.7",
     "babel-plugin-import": "^1.13.3",
+    "cache-loader": "^4.1.0",
     "cross-env": "^7.0.3",
     "jest": "^27.4.0",
     "less": "^4.1.2",

diff --git a/src/App.vue b/src/App.vue
@@ -20,7 +20,7 @@ body,
 /* 每个页面公共css */
 @import url("./assets/less/style-mirror.css");
 @import url("./assets/less/theme.less");
-@import url("./assets/less/code-theme.less");
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;

diff --git a/src/assets/less/code-theme.less b/src/assets/less/code-theme.less
diff --git a/src/assets/less/codeTheme/github-code-block.less b/src/assets/less/codeTheme/github-code-block.less
diff --git a/src/assets/less/codeTheme/wechat-code-block.less b/src/assets/less/codeTheme/wechat-code-block.less
diff --git a/src/assets/less/github-v2.min.css b/src/assets/less/github-v2.min.css
diff --git a/src/assets/scripts/config.js b/src/assets/scripts/config.js
@@ -57,14 +57,29 @@ export default {
   ],
   codeThemeOption: [
     {
-      label: "微信",
-      value: "wechat",
-      desc: "默认样式",
+      label: "github",
+      value: "https://lib.baomitu.com/highlight.js/10.7.3/styles/github.min.css",
+      desc: "light",
     },
     {
-      label: "GitHub",
-      value: "github",
-      desc: "精简风格",
+      label: "solarized-light",
+      value: "https://lib.baomitu.com/highlight.js/11.3.1/styles/base16/solarized-light.min.css",
+      desc: "light",
+    },
+    {
+      label: "atom-one-dark",
+      value: "https://lib.baomitu.com/highlight.js/11.3.1/styles/atom-one-dark.min.css",
+      desc: "dark",
+    },
+    {
+      label: "obsidian",
+      value: "https://lib.baomitu.com/highlight.js/11.3.1/styles/obsidian.min.css",
+      desc: "dark",
+    },
+    {
+      label: "vs2015",
+      value: "https://lib.baomitu.com/highlight.js/11.3.1/styles/vs2015.min.css",
+      desc: "dark",
     },
   ],
   form: {

diff --git a/src/assets/scripts/renderers/wx-renderer.js b/src/assets/scripts/renderers/wx-renderer.js
@@ -1,4 +1,5 @@
 import { Renderer } from "marked";
+import hljs from 'highlight.js';
 
 class WxRenderer {
   constructor(opts) {
@@ -7,9 +8,6 @@ class WxRenderer {
     let footnoteIndex = 0;
     let styleMapping = new Map();
 
-    const CODE_FONT_FAMILY =
-      "Menlo, Operator Mono, Consolas, Monaco, monospace";
-
     let merge = (base, extend) => Object.assign({}, base, extend);
 
     this.buildTheme = (themeTpl) => {
@@ -25,13 +23,10 @@ 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];
-          if (ele === "code") {
-            style["font-family"] = CODE_FONT_FAMILY;
-          }
           mapping[ele] = merge(base_block, style);
         }
       }
@@ -126,23 +121,17 @@ class WxRenderer {
         return `<blockquote ${getStyles("blockquote")}>${text}</blockquote>`;
       };
       renderer.code = (text, lang) => {
-        text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
-        const codeLines = text
-          .split("\n")
-          .map(
-            (line) =>
-              `<code class="prettyprint"><span class="code-snippet_outer">${
-                line || " "
-              }</span></code>`
-          );
-        const codeTheme = "github";
-        return `
-                <section class="code-snippet__${codeTheme}">
-                    <pre class="code__pre" data-lang="${lang}">
-                        ${codeLines.join("")}
-                    </pre>
-                </section>
-            `;
+        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>`;