:art: #250 2

src/assets/scss/_ir.scss

@@ -27,6 +27,10 @@
       transition: $transition;
     }
 
+    .vditor-ir__preview code:not(.hljs):not(.highlight-chroma) {
+      background-color: var(--preview-background-color);
+    }
+
     &--expand {
       .vditor-ir__marker {
         color: var(--second-color);

src/assets/scss/_wysiwyg.scss

@@ -51,9 +51,14 @@
   }
 
   &__block {
-    &[data-type="html-block"] > pre,
-    &[data-type="math-block"] > pre {
-      margin-bottom: 0;
+    &[data-type="html-block"] {
+      & > pre {
+        margin-bottom: 0;
+      }
+
+      .vditor-wysiwyg__preview {
+        background-color: var(--preview-background-color);
+      }
     }
 
     code {
@@ -94,6 +99,10 @@
     white-space: initial;
     min-height: 27px;
 
+    code:not(.hljs):not(.highlight-chroma) {
+      background-color: var(--preview-background-color);
+    }
+
     pre {
       margin-bottom: 1em !important;
     }

src/ts/ir/process.ts

@@ -79,7 +79,11 @@ export const processAfterRender = (vditor: IVditor, options = {
 };
 
 export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) => {
-    const language = previewPanel.querySelector("code").className.replace("language-", "");
+    const codeElement = previewPanel.querySelector("code")
+    if (!codeElement) {
+        return;
+    }
+    const language = codeElement.className.replace("language-", "");
     if (language === "abc") {
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {

src/ts/wysiwyg/processCodeRender.ts

@@ -3,7 +3,7 @@ import {Constants} from "../constants";
 import {abcRender} from "../markdown/abcRender";
 import {chartRender} from "../markdown/chartRender";
 import {codeRender} from "../markdown/codeRender";
-import { graphvizRender } from "../markdown/graphvizRender";
+import {graphvizRender} from "../markdown/graphvizRender";
 import {highlightRender} from "../markdown/highlightRender";
 import {mathRender} from "../markdown/mathRender";
 import {mermaidRender} from "../markdown/mermaidRender";
@@ -85,8 +85,14 @@ export const processCodeRender = (blockElement: HTMLElement, vditor: IVditor) =>
         }
         previewPanel.innerHTML = tempHTML;
     } else if (blockType.indexOf("math") > -1) {
-        previewPanel.innerHTML = `<${tagName} class="vditor-math">${
-            innerHTML.replace(Constants.ZWSP, "")}</${tagName}>`;
+        if (tagName === "span") {
+            previewPanel.innerHTML = `<code class="language-math"><${tagName} class="vditor-math">${
+                innerHTML.replace(Constants.ZWSP, "")}</${tagName}></code>`;
+        } else {
+            previewPanel.innerHTML = `<pre><code class="language-math"><${tagName} class="vditor-math">${
+                innerHTML.replace(Constants.ZWSP, "")}</${tagName}></code></pre>`;
+        }
+
         mathRender(previewPanel, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
     }