:art: 五线谱 #822

CHANGELOG.md

@@ -83,6 +83,7 @@
 
 ### v3.6.4 / 2020-11-xx
 
+* [822](https://github.com/Vanessa219/vditor/issues/822) 流程图、甘特图、时序图、图表、脑图、五线谱、添加暗黑模式 `引入特性`
 * [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

@@ -52,6 +52,7 @@ 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',
+  cdn: 'http://localhost:9000',
   toolbar,
   mode: 'wysiwyg',
   height: window.innerHeight + 100,
@@ -59,15 +60,20 @@ window.vditor = new Vditor('vditor', {
   debugger: true,
   typewriterMode: true,
   placeholder: 'Hello, Vditor!',
+  theme: 'dark',
   preview: {
     markdown: {
       toc: true,
       mark: true,
       footnotes: true,
     },
+    theme: {
+      current: 'dark',
+      path: 'http://localhost:9000/src/css/content-theme',
+    },
     math: {
       engine: 'MathJax',
-    }
+    },
   },
   toolbarConfig: {
     pin: true,

src/assets/scss/_reset.scss

@@ -211,7 +211,7 @@
       }
     }
 
-    .languate-math mjx-container:focus {
+    .language-math mjx-container:focus {
       outline: none;
       cursor: context-menu;
     }

src/css/content-theme/ant-design.css

@@ -132,15 +132,10 @@
     border-radius: 2px;
 }
 
-.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
-    margin: 0;
-    padding: 16px 32px;
-    overflow: auto;
+.vditor-reset .language-abc svg,
+.vditor-reset .language-abc path {
+    fill: currentColor;
     color: rgba(0, 0, 0, .85);
-    font-size: 13px;
-    direction: ltr;
-    text-align: left;
-    background: #f6f8fa;
 }
 
 .vditor-reset strong,

src/css/content-theme/dark.css

@@ -68,8 +68,10 @@
     --code-background-color: rgba(66, 133, 244, .36);
 }
 
-.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
-    background-color: rgba(120, 146, 190, .55)
+.vditor-reset .language-abc svg,
+.vditor-reset .language-abc path {
+    fill: currentColor;
+    color: #d1d5da;
 }
 
 .vditor-reset kbd {

src/css/content-theme/light.css

@@ -60,10 +60,6 @@
     --code-background-color: rgba(27, 31, 35, .05);
 }
 
-.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
-    background-color: rgba(27, 31, 35, .02);
-}
-
 .vditor-reset kbd {
     color: #24292e;
     background-color: #fafbfc;

src/css/content-theme/wechat.css

@@ -84,9 +84,8 @@
     --code-background-color: rgba(0, 0, 0, 0.03);
 }
 
-.vditor-reset pre code:not(.hljs):not(.highlight-chroma), .vditor-reset .language-abc {
-    background-color: rgba(0, 0, 0, 0.02);
-    font-size: 14px;
-    border: 1px solid #f0f0f0;
-    border-radius: 2px;
+.vditor-reset .language-abc svg,
+.vditor-reset .language-abc path {
+    fill: currentColor;
+    color: rgb(62, 62, 62);
 }

src/ts/markdown/codeRender.ts

@@ -9,7 +9,8 @@ export const codeRender = (element: HTMLElement, lang: keyof II18n = "zh_CN") =>
         }
         if (e.classList.contains("language-mermaid") || e.classList.contains("language-flowchart") ||
             e.classList.contains("language-echarts") || e.classList.contains("language-mindmap") ||
-            e.classList.contains("language-abc") || e.classList.contains("language-graphviz")) {
+            e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
+            e.classList.contains("language-math") ) {
             return;
         }
 

src/ts/markdown/highlightRender.ts

@@ -38,7 +38,8 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
 
             if (block.classList.contains("language-mermaid") || block.classList.contains("language-flowchat") ||
                 block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
-                block.classList.contains("language-abc") || block.classList.contains("language-graphviz")) {
+                block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
+                block.classList.contains("language-math")) {
                 return;
             }
             hljs.highlightBlock(block);