:bug: #524

demo/markdown/zh_CN.md

@@ -349,13 +349,13 @@ https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html
 
     缩进对齐的段落包含在这个脚注定义内。
 
-    ```
+    ```text
     可以使用代码块。
     ```
 
     还有其他行级排版语法，比如**加粗**和[链接](https://b3log.org)。
 
-```
+```text
 这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。
 [^1]: 第一个脚注定义。
 [^bignote]: 脚注定义可使用多段内容。

demo/render.js

@@ -24,7 +24,7 @@ const render = (fileName) => {
           anchor: 1,
           after () {
             if (window.innerWidth <= 768) {
-              return;
+              return
             }
             const outlineElement = document.getElementById('outline')
             Vditor.outlineRender(document.getElementById('preview'),

src/assets/scss/_reset.scss

@@ -199,6 +199,11 @@
       &.language-mindmap {
         background-color: rgba(27, 31, 35, .02);
       }
+
+    }
+
+    .language-abc {
+      background-color: rgba(27, 31, 35, .02);
     }
 
     pre {

src/css/content-theme/dark.css

@@ -70,7 +70,8 @@
 .vditor-reset code:not(.hljs):not(.highlight-chroma).language-mindmap,
 .vditor-reset code:not(.hljs):not(.highlight-chroma).language-graphviz,
 .vditor-reset code:not(.hljs):not(.highlight-chroma).language-math,
-.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mermaid {
+.vditor-reset code:not(.hljs):not(.highlight-chroma).language-mermaid,
+.vditor-reset .language-abc {
     background-color: rgba(120, 146, 190, .55)
 }
 

src/ts/markdown/abcRender.ts

@@ -12,7 +12,7 @@ export const abcRender = (element: (HTMLElement | Document) = document,
         addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
             abcElements.forEach((e: HTMLDivElement) => {
                 const divElement = document.createElement("div");
-                divElement.style.backgroundColor = "var(--preview-background-color)";
+                divElement.className = "language-abc";
                 e.parentNode.replaceChild(divElement, e);
                 ABCJS.renderAbc(divElement, e.textContent.trim());
                 divElement.style.overflowX = "auto";