:bug:

demo/index.js

@@ -1,7 +1,53 @@
 import Vditor from '../src/index'
 import '../src/assets/scss/index.scss'
 
+let toolbar
+if (window.innerWidth < 768) {
+  toolbar =  [
+    "emoji",
+    "headings",
+    "bold",
+    "italic",
+    "strike",
+    "link",
+    "|",
+    "list",
+    "ordered-list",
+    "check",
+    "outdent",
+    "indent",
+    "|",
+    "quote",
+    "line",
+    "code",
+    "inline-code",
+    "insert-before",
+    "insert-after",
+    "|",
+    "upload",
+    "record",
+    "table",
+    "|",
+    "undo",
+    "redo",
+    "|",
+    "edit-mode",
+    "code-theme",
+    {
+      name: "more",
+      toolbar: [
+        "fullscreen",
+        "both",
+        "preview",
+        "format",
+        "info",
+        "help",
+      ],
+    }]
+}
+
 window.vditor = new Vditor('vditor', {
+  toolbar,
   debugger: true,
   typewriterMode: true,
   placeholder: 'placeholder',

src/assets/icons/code-theme.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<path d="M2.783 5.565v20.87h26.435v-20.87h-26.435zM2.783 2.783h26.435c1.535 0 2.783 1.248 2.783 2.783v20.87c0 1.535-1.248 2.783-2.783 2.783h-26.435c-1.535 0-2.783-1.248-2.783-2.783v-20.87c0-1.535 1.248-2.783 2.783-2.783zM0 9.739h31.304v1.391h-31.304v-1.391zM4.87 6.957h1.391c0.383 0 0.696 0.313 0.696 0.696s-0.313 0.696-0.696 0.696h-1.391c-0.383 0-0.696-0.313-0.696-0.696s0.313-0.696 0.696-0.696zM9.043 6.957h1.391c0.383 0 0.696 0.313 0.696 0.696s-0.313 0.696-0.696 0.696h-1.391c-0.383 0-0.696-0.313-0.696-0.696s0.313-0.696 0.696-0.696z"></path>
+<path d="M11.817 16.47v1.291l-4.635 1.965 4.635 1.965v1.291l-6.322-2.73v-1.052l6.322-2.73zM16.443 15.47h1.226l-3.648 8.739h-1.239l3.661-8.739zM19.33 16.47l6.322 2.73v1.052l-6.322 2.73v-1.291l4.635-1.965-4.635-1.965v-1.291z"></path>
+</svg>

src/assets/scss/_panel.scss

@@ -64,7 +64,7 @@
     }
 
     &--side {
-      right: 100%;
+      left: 100%;
       margin-top: -31px !important;
     }
   }
@@ -117,4 +117,8 @@
   .vditor-panel--arrow:before {
     left: 12px;
   }
+  .vditor-panel--left.vditor-panel--arrow:before {
+    left: auto;
+    right: 12px;
+  }
 }

src/ts/markdown/highlightRender.ts

@@ -30,6 +30,12 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
 
     addScript(`${cdn}/dist/js/highlight.js/highlight.pack.js`, "vditorHljsScript").then(() => {
         element.querySelectorAll("pre > code").forEach((block) => {
+            // ir & wysiwyg 区域不渲染
+            if (block.parentElement.classList.contains("vditor-ir__marker--pre") ||
+                block.parentElement.classList.contains("vditor-wysiwyg__pre")) {
+                return;
+            }
+
             if (block.classList.contains("language-mermaid") || block.classList.contains("language-echarts")
                 || block.classList.contains("language-abc") || block.classList.contains("language-graphviz")) {
                 return;

src/ts/util/Options.ts

@@ -5,6 +5,7 @@ import boldSVG from "../../assets/icons/bold.svg";
 import bothSVG from "../../assets/icons/both.svg";
 import bugSVG from "../../assets/icons/bug.svg";
 import checkSVG from "../../assets/icons/check.svg";
+import codeThemeSVG from "../../assets/icons/code-theme.svg";
 import codeSVG from "../../assets/icons/code.svg";
 import editSVG from "../../assets/icons/edit.svg";
 import emojiSVG from "../../assets/icons/emoji.svg";
@@ -99,7 +100,8 @@ export class Options {
             position: "bottom",
         },
         theme: "classic",
-        toolbar: ["emoji",
+        toolbar: [
+            "emoji",
             "headings",
             "bold",
             "italic",
@@ -327,6 +329,7 @@ export class Options {
         name: "outline",
         tipPosition: "nw",
     }, {
+        icon: codeThemeSVG,
         name: "code-theme",
         tipPosition: "nw",
     }, {