:art: fix #823

CHANGELOG.md

@@ -83,6 +83,7 @@
 
 ### v3.6.4 / 2020-11-xx
 
+* [823](https://github.com/Vanessa219/vditor/issues/823) 数学公式块去除背景 `改进功能`
 * [761](https://github.com/Vanessa219/vditor/issues/761) 列表项批量缩进和取消缩进 `改进功能`
 * [819](https://github.com/Vanessa219/vditor/issues/819) 粘贴后滚动到粘贴内容末尾 bug `修复缺陷`
 

demo/index.js

@@ -50,8 +50,8 @@ if (window.innerWidth < 768) {
 }
 
 window.vditor = new Vditor('vditor', {
-  // _lutePath: `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`,
-  _lutePath: 'src/js/lute/lute.min.js',
+  _lutePath: `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`,
+  // _lutePath: 'src/js/lute/lute.min.js',
   toolbar,
   mode: 'wysiwyg',
   height: window.innerHeight + 100,
@@ -65,6 +65,9 @@ window.vditor = new Vditor('vditor', {
       mark: true,
       footnotes: true,
     },
+    math: {
+      engine: 'MathJax',
+    }
   },
   toolbarConfig: {
     pin: true,

src/assets/scss/_reset.scss

@@ -191,25 +191,45 @@
 
     pre {
       margin: 1em 0;
+      & > code {
+        margin: 0;
+        font-size: 85%;
+        padding: 0.5em;
+        border-radius: 5px;
+        display: block;
+        overflow: auto;
+        white-space: pre;
+        font-family: $font-family-code;
+        background-size: 20px 20px;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+        word-break: initial;
+        word-wrap: normal;
+      }
+
+      &:hover div.vditor-copy {
+        display: block;
+      }
     }
 
-    pre > code {
-      margin: 0;
-      font-size: 85%;
-      padding: 0.5em;
-      border-radius: 5px;
-      display: block;
-      overflow: auto;
-      white-space: pre;
-      font-family: $font-family-code;
-      background-size: 20px 20px;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
-      word-break: initial;
-      word-wrap: normal;
+    .languate-math mjx-container:focus {
+      outline: none;
+      cursor: context-menu;
     }
 
-    pre:hover div.vditor-copy {
-      display: block;
+    .language-echarts,
+    .language-mindmap {
+      overflow: hidden;
+      height: 420px;
+    }
+
+    .language-graphviz {
+      polygon {
+        fill: transparent;
+      }
+
+      parsererror {
+        overflow: auto;
+      }
     }
 
     kbd {
@@ -247,22 +267,6 @@
     hr:last-child {
       margin-bottom: 0;
     }
-
-    .language-echarts,
-    .language-mindmap {
-      overflow: hidden;
-      height: 420px;
-    }
-
-    .language-graphviz {
-      polygon {
-        fill: transparent;
-      }
-
-      parsererror {
-        overflow: auto;
-      }
-    }
   }
 
   &-comment {
@@ -475,11 +479,6 @@
     }
   }
 
-  &-math mjx-container:focus {
-    outline: none;
-    cursor: context-menu;
-  }
-
   &-footnotes__goto-ref {
     text-decoration: none;
   }

src/ts/markdown/graphvizRender.ts

@@ -35,7 +35,7 @@ export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
                     e.innerHTML = result.outerHTML;
                 }).catch((error) => {
                     e.innerHTML = `graphviz render error: <br>${error}`;
-                    e.className = "vditor-math vditor-reset--error";
+                    e.className = "vditor-reset--error";
                 });
             } catch (e) {
                 console.error("graphviz error", e);

src/ts/markdown/mathRender.ts

@@ -17,7 +17,7 @@ declare global {
 }
 
 export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
-    const mathElements = element.querySelectorAll(".vditor-math");
+    const mathElements = element.querySelectorAll(".language-math");
 
     if (mathElements.length === 0) {
         return;
@@ -54,13 +54,13 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
                     });
                 } catch (e) {
                     mathElement.innerHTML = e.message;
-                    mathElement.className = "vditor-math vditor-reset--error";
+                    mathElement.className = "vditor-reset--error";
                 }
 
                 mathElement.addEventListener("copy", (event: ClipboardEvent) => {
                     event.stopPropagation();
                     event.preventDefault();
-                    const vditorMathElement = (event.currentTarget as HTMLElement).closest(".vditor-math");
+                    const vditorMathElement = (event.currentTarget as HTMLElement).closest(".language-math");
                     event.clipboardData.setData("text/html", vditorMathElement.innerHTML);
                     event.clipboardData.setData("text/plain",
                         vditorMathElement.getAttribute("data-math"));
@@ -102,7 +102,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
                     const errorTextElement = mathElement.querySelector('[data-mml-node="merror"]');
                     if (errorTextElement && errorTextElement.textContent.trim() !== "") {
                         mathElement.innerHTML = errorTextElement.textContent.trim();
-                        mathElement.className = "vditor-math vditor-reset--error";
+                        mathElement.className = "vditor-reset--error";
                     }
                 });
             });

src/ts/preview/index.ts

@@ -209,7 +209,7 @@ export class Preview {
                 item.style.display = "initial";
             });
         } else {
-            copyElement.querySelectorAll(".vditor-math").forEach((item: HTMLElement) => {
+            copyElement.querySelectorAll(".language-math").forEach((item: HTMLElement) => {
                 item.outerHTML = `<img class="Formula-image" data-eeimg="true" src="//www.zhihu.com/equation?tex=" alt="${item.getAttribute("data-math")}\\" style="display: block; margin: 0 auto; max-width: 100%;">`;
             });
         }

src/ts/util/processCode.ts

@@ -56,16 +56,14 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     if (!previewPanel) {
         return;
     }
-    const codeElement = previewPanel.querySelector("code");
-    if (!codeElement) {
-        if (previewPanel.parentElement.getAttribute("data-type") === "html-block") {
-            previewPanel.style.backgroundColor = "var(--preview-background-color)";
-            previewPanel.style.padding = "0.2em 0.4em";
-            previewPanel.setAttribute("data-render", "1");
-        }
+    if (previewPanel.parentElement.getAttribute("data-type") === "html-block") {
+        previewPanel.setAttribute("data-render", "1");
+        return;
+    }
+    const language = previewPanel.firstElementChild.className.replace("language-", "");
+    if (!language) {
         return;
     }
-    const language = codeElement.className.replace("language-", "");
     if (language === "abc") {
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {
@@ -79,12 +77,7 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     } else if (language === "graphviz") {
         graphvizRender(previewPanel, vditor.options.cdn);
     } else if (language === "math") {
-        let tag = "div";
-        if (previewPanel.tagName === "SPAN") {
-            tag = "span";
-        }
-        previewPanel.innerHTML = `<code class="language-math"><${tag} class="vditor-math">${previewPanel.innerHTML}</${tag}></code>`;
-        mathRender(previewPanel.parentElement, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
+        mathRender(previewPanel, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
     } else {
         highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
         codeRender(previewPanel, vditor.options.lang);