:lipstick: chart render 改进

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,

src/assets/scss/_ir.scss

@@ -35,11 +35,6 @@
       display: inline-block;
       height: 0;
       transition: $transition;
-
-      .language-mermaid,
-      .language-flowchart {
-        text-align: left;
-      }
     }
 
     &--hidden {
@@ -88,9 +83,10 @@
           color: var(--ir-heading-color);
         }
 
-        &--pre {
+        &--pre code {
           color: var(--textarea-text-color);
           height: auto;
+          text-align: left;
         }
       }
 

src/assets/scss/_reset.scss

@@ -233,7 +233,8 @@
     }
 
     .language-mermaid,
-    .language-flowchart {
+    .language-flowchart,
+    .language-graphviz {
       text-align: center;
     }
 

src/assets/scss/_wysiwyg.scss

@@ -57,6 +57,9 @@
 
       code {
         height: auto;
+        color: var(--textarea-text-color);
+        height: auto;
+        text-align: left;
       }
     }
 
@@ -71,11 +74,6 @@
     min-height: 27px;
   }
 
-  &__pre .language-mermaid,
-  &__pre .language-flowchart{
-    text-align: left;
-  }
-
   & > .vditor-reset > h1:before,
   & > .vditor-reset > h2:before,
   & > .vditor-reset > h3:before,