🎨 #9

demo/demo.js

@@ -59,8 +59,10 @@ new Vditor('vditor', {
     },
   },
   preview: {
+    hljs: {
+      style: 'github',
+    },
     show: true,
-    url: '/api/markdown',
     parse: () => {
       LazyLoadImage()
     },

demo/demo.scss

@@ -175,6 +175,7 @@
     background-color: rgba(0, 0, 0, 0.04);
     background-size: 20px 20px;
     border-radius: 5px;
+    display: block;
   }
 
   kbd {

package.json

@@ -10,6 +10,8 @@
     "src/*"
   ],
   "dependencies": {
+    "highlight.js": "^9.15.6",
+    "markdown-it": "^8.4.2",
     "turndown": "^5.0.3",
     "turndown-plugin-gfm": "^1.0.2"
   },

src/ts/preview/index.ts

@@ -13,7 +13,7 @@ export class Preview {
         }
     }
 
-    public render(vditor: IVditor, value?: string) {
+    public async render(vditor: IVditor, value?: string) {
         if (this.element.style.display === "none") {
             return;
         }
@@ -55,7 +55,33 @@ export class Preview {
                 }));
             }, vditor.options.preview.delay);
         } else {
-            this.element.innerHTML = vditor.editor.element.value;
+            const {default: MarkdownIt} = await import(/* webpackChunkName: "markdown-it" */ "markdown-it");
+            const hljsOpt: IHljsOptions = {
+                html: true,
+                linkify: true,
+                typographer: true,
+            }
+            if (vditor.options.preview.hljs.style) {
+                if (!document.getElementById('vditorHljsStyle')){
+                    const hljsStyle = document.createElement("link")
+                    hljsStyle.id = 'vditorHljsStyle'
+                    hljsStyle.setAttribute("rel", "stylesheet")
+                    hljsStyle.setAttribute("type", "text/css")
+                    hljsStyle.setAttribute("href", `https://cdn.jsdelivr.net/npm/[email protected]/styles/${vditor.options.preview.hljs.style}.min.css`)
+                    document.getElementsByTagName('head')[0].appendChild(hljsStyle)
+                }
+            }
+            if (vditor.options.preview.hljs.enable) {
+                const {default: hljs} = await import(/* webpackChunkName: "highlight.js" */ "highlight.js");
+                hljsOpt.highlight = (str: string, lang: string) => {
+                    if (lang && hljs.getLanguage(lang)) {
+                        return hljs.highlight(lang, str, true).value
+                    }
+                    return hljs.highlightAuto(str).value;
+                }
+            }
+            const md = new MarkdownIt(hljsOpt);
+            this.element.innerHTML = md.render(vditor.editor.element.value);
         }
     }
 }

src/ts/types/index.d.ts

@@ -5,6 +5,10 @@ declare module "*.svg" {
 
 declare module "*.png";
 
+declare module "highlight.js";
+
+declare module "markdown-it";
+
 declare module "turndown";
 
 declare module "turndown-plugin-gfm/lib/turndown-plugin-gfm.es.js";
@@ -14,6 +18,13 @@ declare var webkitAudioContext: {
     new(contextOptions?: AudioContextOptions): AudioContext,
 };
 
+declare interface IHljsOptions {
+    html: boolean
+    linkify: boolean
+    typographer: boolean
+    highlight?(str: string, lang: string): string
+}
+
 declare interface ITurndown {
     prototype: {
         escape(name: string): string,
@@ -75,6 +86,10 @@ interface IPreview {
     show?: boolean;
     parse?: (element: HTMLElement) => void;
     url?: string;
+    hljs: {
+        style: string,
+        enable: boolean
+    }
 }
 
 interface IHintData {

src/ts/util/Options.ts

@@ -20,6 +20,10 @@ export class Options {
         lang: "zh_CN",
         placeholder: "",
         preview: {
+            hljs: {
+                style: 'atom-one-light',
+                enable: true
+            },
             delay: 1000,
             show: false,
         },
@@ -185,6 +189,9 @@ export class Options {
             }
 
             if (this.options.preview) {
+                if (this.options.preview.hljs) {
+                    this.options.preview.hljs = Object.assign({}, this.defaultOptions.preview.hljs, this.options.preview.hljs);
+                }
                 this.options.preview = Object.assign({}, this.defaultOptions.preview, this.options.preview);
             }