:sparkles: fix #323

CHANGELOG.md

@@ -59,6 +59,8 @@
 
 ### v3.1.13 / 2020-04-1x
 
+* [323](https://github.com/Vanessa219/vditor/issues/323) setTheme 需支持代码块风格的切换 `改进功能`
+
 ### v3.1.12 / 2020-04-17
 
 * [320](https://github.com/Vanessa219/vditor/issues/320) 代码区点击复制代码时自动去掉行号 `修复缺陷`
@@ -104,6 +106,7 @@
   * options.preview.maxWidth 默认值改为 800
   * IPreviewOptions 添加 `after`，`lazyLoadImage`
   * 添加 lazyLoadImageRender 静态方法
+  * `setTheme` 方法添加 `codeTheme` 参数
 
 ### v3.0.12 / 2020-04-06
 

README.md

@@ -367,7 +367,7 @@ xhr.send(JSON.stringify({url: src})); // src is the address of the image outside
 | html2md(value: string) | HTML to md |
 | tip(text: string, time: number) | notification. time is 0 will always display |
 | setPreviewMode(mode: "both" \| "editor" \| "preview") | Set preview mode |
-| setTheme(theme: "dark" \| "classic") | Set theme |
+| setTheme(theme: "dark" \| "classic", codeTheme?: string) | Set theme |
 | getCurrentMode(): string | Get the editor's current editing mode |
 
 #### static methods

demo/index.html

@@ -44,8 +44,8 @@
 </h2>
 <h2>
     Vditor for you
-    <button onclick="window.vditor.setTheme('dark')">Dark</button>
-    <button onclick="window.vditor.setTheme('light')">Light</button>
+    <button onclick="window.vditor.setTheme('dark', 'native')">Dark</button>
+    <button onclick="window.vditor.setTheme('light', 'github')">Light</button>
 </h2>
 <div id="vditor">
 <h1>Vditor</h1>

demo/index.js

@@ -9,9 +9,6 @@ window.vditor = new Vditor('vditor', {
     markdown: {
       toc: true,
     },
-    hljs: {
-      style: 'native',
-    },
   },
   toolbarConfig: {
     pin: true,

src/index.ts

@@ -127,9 +127,9 @@ class Vditor extends VditorMethod {
     }
 
     /** 设置主题 */
-    public setTheme(theme: "dark" | "classic") {
+    public setTheme(theme: "dark" | "classic", codeTheme?: string) {
         this.vditor.options.theme = theme;
-        setTheme(this.vditor);
+        setTheme(this.vditor, codeTheme);
     }
 
     /** 获取编辑器内容 */

src/ts/markdown/highlightRender.ts

@@ -1,5 +1,5 @@
 import {VDITOR_VERSION} from "../constants";
-import { addScript} from "../util/addScript";
+import {addScript} from "../util/addScript";
 import {addStyle} from "../util/addStyle";
 
 declare const hljs: {
@@ -13,16 +13,16 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
         "native", "paraiso-dark", "paraiso-light", "pastie", "perldoc", "pygments", "rainbow_dash", "rrt",
         "solarized-dark", "solarized-dark256", "solarized-light", "swapoff", "tango", "trac", "vim", "vs", "xcode"];
 
-    if (!hljsThemes.includes(hljsOption.style)) {
-        hljsOption.style = "github";
+    let style = hljsOption.style;
+    if (!hljsThemes.includes(style)) {
+        style = "github";
     }
-
     const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
-    const href = `${cdn}/dist/js/highlight.js/styles/${hljsOption.style}.css`;
+    const href = `${cdn}/dist/js/highlight.js/styles/${style}.css`;
     if (vditorHljsStyle && vditorHljsStyle.href !== href) {
         vditorHljsStyle.remove();
     }
-    addStyle(`${cdn}/dist/js/highlight.js/styles/${hljsOption.style}.css`, "vditorHljsStyle");
+    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
 
     if (!hljsOption.enable) {
         return;

src/ts/ui/setTheme.ts

@@ -1,4 +1,6 @@
-export const setTheme = (vditor: IVditor) => {
+import {highlightRender} from "../markdown/highlightRender";
+
+export const setTheme = (vditor: IVditor, codeTheme?: string) => {
     if (vditor.options.theme === "dark") {
         vditor.element.classList.add("vditor--dark");
         if (vditor.preview) {
@@ -14,4 +16,25 @@ export const setTheme = (vditor: IVditor) => {
         vditor.wysiwyg.element.classList.remove("vditor-reset--dark");
         vditor.ir.element.classList.remove("vditor-reset--dark");
     }
+
+    if (codeTheme) {
+        vditor.options.preview.hljs.style = codeTheme;
+        if (vditor.currentMode === "sv") {
+            if (vditor.preview.element.style.display !== "none") {
+                highlightRender({
+                        enable: vditor.options.preview.hljs.enable,
+                        lineNumber: vditor.options.preview.hljs.lineNumber,
+                        style: vditor.options.preview.hljs.style,
+                    },
+                    vditor.preview.element, vditor.options.cdn);
+            }
+        } else {
+            highlightRender({
+                    enable: true,
+                    lineNumber: vditor.options.preview.hljs.lineNumber,
+                    style: vditor.options.preview.hljs.style,
+                },
+                vditor[vditor.currentMode].element, vditor.options.cdn);
+        }
+    }
 };

types/index.d.ts

@@ -201,7 +201,7 @@ interface IPreviewMode {
 interface IHljs {
     /** 是否启用行号。默认值: false */
     lineNumber?: boolean;
-    /** 可选值参见 [Chroma](https://xyproto.github.io/splash/docs/longer/all.html)。 默认值: 'github' */
+    /** 代码风格，可选值参见 [Chroma](https://xyproto.github.io/splash/docs/longer/all.html)。 默认值: 'github' */
     style?: string;
     /** 是否启用代码高亮。默认值: true */
     enable?: boolean;