@yltrcc/vditor 0.0.1

package/src/ts/ir/processKeydown.ts

@@ -0,0 +1,238 @@
+import {Constants} from "../constants";
+import {hidePanel} from "../toolbar/setToolbar";
+import {isCtrl} from "../util/compatibility";
+import {
+    fixBlockquote, fixCJKPosition,
+    fixCodeBlock, fixCursorDownInlineMath,
+    fixDelete, fixFirefoxArrowUpTable, fixGSKeyBackspace, fixHR,
+    fixList,
+    fixMarkdown,
+    fixTab,
+    fixTable,
+    fixTask,
+    insertAfterBlock, insertBeforeBlock, isFirstCell, isLastCell,
+} from "../util/fixBrowserBehavior";
+import {
+    hasClosestBlock,
+    hasClosestByAttribute,
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+} from "../util/hasClosest";
+import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
+import {matchHotKey} from "../util/hotKey";
+import {getEditorRange, getSelectPosition, setSelectionFocus} from "../util/selection";
+import {keydownToc} from "../util/toc";
+import {expandMarker} from "./expandMarker";
+import {processAfterRender, processHeading} from "./process";
+
+export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
+    vditor.ir.composingLock = event.isComposing;
+    if (event.isComposing) {
+        return false;
+    }
+
+    // 添加第一次记录 undo 的光标
+    if (event.key.indexOf("Arrow") === -1 && event.key !== "Meta" && event.key !== "Control" && event.key !== "Alt" &&
+        event.key !== "Shift" && event.key !== "CapsLock" && event.key !== "Escape" && !/^F\d{1,2}$/.test(event.key)) {
+        vditor.undo.recordFirstPosition(vditor, event);
+    }
+
+    const range = getEditorRange(vditor);
+    const startContainer = range.startContainer;
+
+    if (!fixGSKeyBackspace(event, vditor, startContainer)) {
+        return false;
+    }
+
+    fixCJKPosition(range, vditor, event);
+
+    fixHR(range);
+
+    // 仅处理以下快捷键操作
+    if (event.key !== "Enter" && event.key !== "Tab" && event.key !== "Backspace" && event.key.indexOf("Arrow") === -1
+        && !isCtrl(event) && event.key !== "Escape" && event.key !== "Delete") {
+        return false;
+    }
+
+    // 斜体、粗体、内联代码块中换行
+    const newlineElement = hasClosestByAttribute(startContainer, "data-newline", "1");
+    if (!isCtrl(event) && !event.altKey && !event.shiftKey && event.key === "Enter" && newlineElement
+        && range.startOffset < newlineElement.textContent.length) {
+        const beforeMarkerElement = newlineElement.previousElementSibling;
+        if (beforeMarkerElement) {
+            range.insertNode(document.createTextNode(beforeMarkerElement.textContent));
+            range.collapse(false);
+        }
+        const afterMarkerElement = newlineElement.nextSibling;
+        if (afterMarkerElement) {
+            range.insertNode(document.createTextNode(afterMarkerElement.textContent));
+            range.collapse(true);
+        }
+    }
+
+    const pElement = hasClosestByMatchTag(startContainer, "P");
+    // md 处理
+    if (fixMarkdown(event, vditor, pElement, range)) {
+        return true;
+    }
+    // li
+    if (fixList(range, vditor, pElement, event)) {
+        return true;
+    }
+    // blockquote
+    if (fixBlockquote(vditor, range, event, pElement)) {
+        return true;
+    }
+    // 代码块
+    const preRenderElement = hasClosestByClassName(startContainer, "vditor-ir__marker--pre");
+    if (preRenderElement && preRenderElement.tagName === "PRE") {
+        const codeRenderElement = preRenderElement.firstChild as HTMLElement;
+        if (fixCodeBlock(vditor, event, preRenderElement, range)) {
+            return true;
+        }
+        // 数学公式上无元素，按上或左将添加新块
+        if ((codeRenderElement.getAttribute("data-type") === "math-block"
+                || codeRenderElement.getAttribute("data-type") === "html-block") &&
+            insertBeforeBlock(vditor, event, range, codeRenderElement, preRenderElement.parentElement)) {
+            return true;
+        }
+
+        // 代码块下无元素或者为代码块/table 元素，添加空块
+        if (insertAfterBlock(vditor, event, range, codeRenderElement, preRenderElement.parentElement)) {
+            return true;
+        }
+    }
+    // 代码块语言
+    const preBeforeElement = hasClosestByAttribute(startContainer, "data-type", "code-block-info");
+    if (preBeforeElement) {
+        if (event.key === "Enter" || event.key === "Tab") {
+            range.selectNodeContents(preBeforeElement.nextElementSibling.firstChild);
+            range.collapse(true);
+            event.preventDefault();
+            hidePanel(vditor, ["hint"]);
+            return true;
+        }
+
+        if (event.key === "Backspace") {
+            const start = getSelectPosition(preBeforeElement, vditor.ir.element).start;
+            if (start === 1) { // 删除零宽空格
+                range.setStart(startContainer, 0);
+            }
+            if (start === 2) { // 删除时清空自动补全语言
+                vditor.hint.recentLanguage = "";
+            }
+        }
+        if (insertBeforeBlock(vditor, event, range, preBeforeElement, preBeforeElement.parentElement)) {
+            // 上无元素，按上或左将添加新块
+            hidePanel(vditor, ["hint"]);
+            return true;
+        }
+    }
+
+    // table
+    const cellElement = hasClosestByMatchTag(startContainer, "TD") ||
+        hasClosestByMatchTag(startContainer, "TH");
+    if (event.key.indexOf("Arrow") > -1 && cellElement) {
+        const tableElement = isFirstCell(cellElement);
+        if (tableElement && insertBeforeBlock(vditor, event, range, cellElement, tableElement)) {
+            return true;
+        }
+
+        const table2Element = isLastCell(cellElement);
+        if (table2Element && insertAfterBlock(vditor, event, range, cellElement, table2Element)) {
+            return true;
+        }
+    }
+    if (fixTable(vditor, event, range)) {
+        return true;
+    }
+
+    // task list
+    if (fixTask(vditor, range, event)) {
+        return true;
+    }
+
+    // tab
+    if (fixTab(vditor, range, event)) {
+        return true;
+    }
+
+    const headingElement = hasClosestByHeadings(startContainer);
+    if (headingElement) {
+        // enter++: 标题变大
+        if (matchHotKey("⌘=", event)) {
+            const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
+            if (headingMarkerElement && headingMarkerElement.textContent.trim().length > 1) {
+                processHeading(vditor, headingMarkerElement.textContent.substr(1));
+            }
+            event.preventDefault();
+            return true;
+        }
+
+        // enter++: 标题变小
+        if (matchHotKey("⌘-", event)) {
+            const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
+            if (headingMarkerElement && headingMarkerElement.textContent.trim().length < 6) {
+                processHeading(vditor, headingMarkerElement.textContent.trim() + "# ");
+            }
+            event.preventDefault();
+            return true;
+        }
+    }
+    const blockElement = hasClosestBlock(startContainer);
+    if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey && range.toString() === "") {
+        if (fixDelete(vditor, range, event, pElement)) {
+            return true;
+        }
+
+        if (blockElement && blockElement.previousElementSibling
+            && blockElement.tagName !== "UL" && blockElement.tagName !== "OL"
+            && (blockElement.previousElementSibling.getAttribute("data-type") === "code-block" ||
+                blockElement.previousElementSibling.getAttribute("data-type") === "math-block")) {
+            const rangeStart = getSelectPosition(blockElement, vditor.ir.element, range).start;
+            if (rangeStart === 0 || (rangeStart === 1 && blockElement.innerText.startsWith(Constants.ZWSP))) {
+                // 当前块删除后光标落于代码渲染块上，当前块会被删除，因此需要阻止事件，不能和 keyup 中的代码块处理合并
+                range.selectNodeContents(blockElement.previousElementSibling.querySelector(".vditor-ir__marker--pre code"));
+                range.collapse(false);
+                expandMarker(range, vditor);
+                if (blockElement.textContent.trim().replace(Constants.ZWSP, "") === "") {
+                    // 当前块为空且不是最后一个时，需要删除
+                    blockElement.remove();
+                    processAfterRender(vditor);
+                }
+                event.preventDefault();
+                return true;
+            }
+        }
+
+        // 光标位于标题前，marker 后
+        if (headingElement) {
+            const headingLength = headingElement.firstElementChild.textContent.length;
+            if (getSelectPosition(headingElement, vditor.ir.element).start === headingLength && headingLength !== 0) {
+                range.setStart(headingElement.firstElementChild.firstChild, headingLength - 1);
+                range.collapse(true);
+                setSelectionFocus(range);
+            }
+        }
+    }
+
+    if ((event.key === "ArrowUp" || event.key === "ArrowDown") && blockElement) {
+        // https://github.com/Vanessa219/vditor/issues/358
+        blockElement.querySelectorAll(".vditor-ir__node").forEach((item: HTMLElement) => {
+            if (!item.contains(startContainer)) {
+                item.classList.add("vditor-ir__node--hidden");
+            }
+        });
+
+        if (fixFirefoxArrowUpTable(event, blockElement, range)) {
+            return true;
+        }
+    }
+    fixCursorDownInlineMath(range, event.key);
+
+    if (blockElement && keydownToc(blockElement, vditor, event, range)) {
+        event.preventDefault();
+        return true;
+    }
+    return false;
+};

package/src/ts/markdown/SMILESRender.ts

@@ -0,0 +1,29 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {SMILESRenderAdapter} from "./adapterRender";
+import {genUUID} from "../util/function";
+
+declare class SmiDrawer {
+    constructor(moleculeOptions: IObject, reactionOptions: IObject);
+
+    public draw: (code: string, id: string, theme?: string) => void;
+}
+
+export const SMILESRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
+    const SMILESElements = SMILESRenderAdapter.getElements(element);
+    if (SMILESElements.length > 0) {
+        addScript(`${cdn}/dist/js/smiles-drawer/smiles-drawer.min.js?v=2.1.7`, "vditorAbcjsScript").then(() => {
+            let sd = new SmiDrawer({}, {});
+            SMILESElements.forEach((item: HTMLDivElement) => {
+                const code = SMILESRenderAdapter.getCode(item).trim();
+                if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+                    return;
+                }
+                const id = "smiles" + genUUID()
+                item.innerHTML = `<svg id="${id}"></svg>`;
+                sd.draw(code, '#' + id, theme === "dark" ? "dark" : undefined)
+                item.setAttribute("data-processed", "true");
+            });
+        });
+    }
+};

package/src/ts/markdown/abcRender.ts

@@ -0,0 +1,27 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {abcRenderAdapter} from "./adapterRender";
+
+declare const ABCJS: {
+    renderAbc(element: HTMLElement, text: string): void;
+};
+
+export const abcRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
+    const abcElements = abcRenderAdapter.getElements(element);
+    if (abcElements.length > 0) {
+        addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
+            abcElements.forEach((item: HTMLDivElement) => {
+                if (item.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                    item.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                    return;
+                }
+                if (item.getAttribute("data-processed") === "true") {
+                    return;
+                }
+                ABCJS.renderAbc(item, abcRenderAdapter.getCode(item).trim());
+                item.style.overflowX = "auto";
+                item.setAttribute("data-processed", "true");
+            });
+        });
+    }
+};

package/src/ts/markdown/adapterRender.ts

@@ -0,0 +1,41 @@
+export const mathRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-math"),
+};
+export const SMILESRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-smiles"),
+};
+export const mermaidRenderAdapter = {
+    /** 不仅要返回code，并且需要将 code 设置为 el 的 innerHTML */
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-mermaid"),
+};
+export const markmapRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-markmap"),
+};
+export const mindmapRenderAdapter = {
+    getCode: (el: Element) => el.getAttribute("data-code"),
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-mindmap"),
+};
+export const chartRenderAdapter = {
+    getCode: (el: HTMLElement) => el.innerText,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-echarts"),
+};
+export const abcRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-abc"),
+};
+export const graphvizRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-graphviz"),
+};
+export const flowchartRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-flowchart"),
+};
+export const plantumlRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-plantuml"),
+};

package/src/ts/markdown/anchorRender.ts

@@ -0,0 +1,19 @@
+export const anchorRender = (type: number) => {
+    document.querySelectorAll(".vditor-anchor").forEach((anchor: HTMLLinkElement) => {
+        if (type === 1) {
+            anchor.classList.add("vditor-anchor--left");
+        }
+        anchor.onclick = () => {
+            const id = anchor.getAttribute("href").substr(1);
+            const top = document.getElementById("vditorAnchor-" + id).offsetTop;
+            document.querySelector("html").scrollTop = top;
+        };
+    });
+
+    window.onhashchange = () => {
+        const element = document.getElementById("vditorAnchor-" + decodeURIComponent(window.location.hash.substr(1)));
+        if (element) {
+            document.querySelector("html").scrollTop = element.offsetTop;
+        }
+    };
+};

package/src/ts/markdown/chartRender.ts

@@ -0,0 +1,38 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {chartRenderAdapter} from "./adapterRender";
+import {looseJsonParse} from "../util/function";
+
+declare const echarts: {
+    init(element: HTMLElement, theme?: string): IEChart;
+};
+
+export const chartRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
+    const echartsElements = chartRenderAdapter.getElements(element);
+    if (echartsElements.length > 0) {
+        addScript(`${cdn}/dist/js/echarts/echarts.min.js?v=5.5.1`, "vditorEchartsScript").then(() => {
+            echartsElements.forEach(async (e: HTMLDivElement) => {
+                if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                    e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                    return;
+                }
+
+                const text = chartRenderAdapter.getCode(e).trim();
+                if (!text) {
+                    return;
+                }
+                try {
+                    if (e.getAttribute("data-processed") === "true") {
+                        return;
+                    }
+                    const option = await looseJsonParse(text);
+                    echarts.init(e, theme === "dark" ? "dark" : undefined).setOption(option);
+                    e.setAttribute("data-processed", "true");
+                } catch (error) {
+                    e.className = "vditor-reset--error";
+                    e.innerHTML = `echarts render error: <br>${error}`;
+                }
+            });
+        });
+    }
+};

package/src/ts/markdown/codeRender.ts

@@ -0,0 +1,60 @@
+import {code160to32} from "../util/code160to32";
+import {Constants} from "../constants";
+
+export const codeRender = (element: HTMLElement, option?: IHljs) => {
+    Array.from<HTMLElement>(element.querySelectorAll("pre > code")).filter((e, index) => {
+        if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+            e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+            return false;
+        }
+        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-plantuml") || e.classList.contains("language-markmap") ||
+            e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
+            e.classList.contains("language-math") || e.classList.contains("language-smiles")) {
+            return false;
+        }
+
+        if (e.style.maxHeight.indexOf("px") > -1) {
+            return false;
+        }
+
+        // 避免预览区在渲染后由于代码块过多产生性能问题 https://github.com/b3log/vditor/issues/67
+        if (element.classList.contains("vditor-preview") && index > 5) {
+            return false;
+        }
+        return true;
+    }).forEach((e) => {
+        let codeText = e.innerText;
+        if (e.classList.contains("highlight-chroma")) {
+            const codeElement = e.cloneNode(true) as HTMLElement;
+            codeElement.querySelectorAll(".highlight-ln").forEach((item: HTMLElement) => {
+                item.remove();
+            });
+            codeText = codeElement.innerText;
+        } else if (codeText.endsWith("\n")) {
+            codeText = codeText.substr(0, codeText.length - 1)
+        }
+        let iconHTML = '<svg><use xlink:href="#vditor-icon-copy"></use></svg>';
+        if (!document.getElementById("vditorIconScript")) {
+            iconHTML = '<svg viewBox="0 0 32 32"><path d="M22.545-0h-17.455c-1.6 0-2.909 1.309-2.909 2.909v20.364h2.909v-20.364h17.455v-2.909zM26.909 5.818h-16c-1.6 0-2.909 1.309-2.909 2.909v20.364c0 1.6 1.309 2.909 2.909 2.909h16c1.6 0 2.909-1.309 2.909-2.909v-20.364c0-1.6-1.309-2.909-2.909-2.909zM26.909 29.091h-16v-20.364h16v20.364z"></path></svg>';
+        }
+
+        const divElement = document.createElement("div");
+        divElement.className = "vditor-copy";
+        divElement.innerHTML = `<span aria-label="${window.VditorI18n?.copy || "复制"}"
+onmouseover="this.setAttribute('aria-label', '${window.VditorI18n?.copy || "复制"}')"
+class="vditor-tooltipped vditor-tooltipped__w"
+onclick="event.stopPropagation();this.previousElementSibling.select();document.execCommand('copy');this.setAttribute('aria-label', '${window.VditorI18n?.copied || "已复制"}');this.previousElementSibling.blur()">${iconHTML}</span>`;
+        const textarea = document.createElement("textarea");
+        textarea.value = code160to32(codeText);
+        divElement.insertAdjacentElement("afterbegin", textarea);
+        if (option && option.renderMenu) {
+            option.renderMenu(e, divElement);
+        }
+        e.before(divElement);
+        e.style.maxHeight = (window.outerHeight - 40) + "px";
+        // https://github.com/Vanessa219/vditor/issues/1356
+        e.insertAdjacentHTML("afterend", `<span style="position: absolute">${Constants.ZWSP}</span>`)
+    });
+};

package/src/ts/markdown/flowchartRender.ts

@@ -0,0 +1,25 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {flowchartRenderAdapter} from "./adapterRender";
+
+declare const flowchart: {
+    parse(text: string): { drawSVG: (type: HTMLElement) => void };
+};
+
+export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
+    const flowchartElements = flowchartRenderAdapter.getElements(element);
+    if (flowchartElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/flowchart.js/flowchart.min.js`, "vditorFlowchartScript").then(() => {
+        flowchartElements.forEach((item: HTMLElement) => {
+            if (item.getAttribute("data-processed") === "true") {
+                return;
+            }
+            const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
+            item.innerHTML = "";
+            flowchartObj.drawSVG(item);
+            item.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/markdown/getHTML.ts

@@ -0,0 +1,11 @@
+import {getMarkdown} from "./getMarkdown";
+
+export const getHTML = (vditor: IVditor) => {
+    if (vditor.currentMode === "sv") {
+        return vditor.lute.Md2HTML(getMarkdown(vditor));
+    } else if (vditor.currentMode === "wysiwyg") {
+        return vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
+    } else if (vditor.currentMode === "ir") {
+        return vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
+    }
+};

package/src/ts/markdown/getMarkdown.ts

@@ -0,0 +1,12 @@
+import {code160to32} from "../util/code160to32";
+
+export const getMarkdown = (vditor: IVditor) => {
+    if (vditor.currentMode === "sv") {
+        return code160to32(`${vditor.sv.element.textContent}\n`.replace(/\n\n$/, "\n"));
+    } else if (vditor.currentMode === "wysiwyg") {
+        return vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML);
+    } else if (vditor.currentMode === "ir") {
+        return vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML);
+    }
+    return "";
+};

package/src/ts/markdown/graphvizRender.ts

@@ -0,0 +1,49 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {graphvizRenderAdapter} from "./adapterRender";
+
+declare class Viz {
+    public renderSVGElement: (code: string) => Promise<any>;
+
+    constructor({ }: { worker: Worker });
+}
+
+export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
+    const graphvizElements = graphvizRenderAdapter.getElements(element);
+
+    if (graphvizElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/dist/js/graphviz/viz.js`, "vditorGraphVizScript").then(() => {
+        graphvizElements.forEach((e: HTMLDivElement) => {
+            const code = graphvizRenderAdapter.getCode(e);
+            if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+
+            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+
+            try {
+                const blob = new Blob([`importScripts('${(document.getElementById("vditorGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
+                    { type: "application/javascript" });
+                const url = window.URL || window.webkitURL;
+                const blobUrl = url.createObjectURL(blob);
+                const worker = new Worker(blobUrl);
+                new Viz({ worker })
+                    .renderSVGElement(code).then((result: HTMLElement) => {
+                        e.innerHTML = result.outerHTML;
+                    }).catch((error) => {
+                        e.innerHTML = `graphviz render error: <br>${error}`;
+                        e.className = "vditor-reset--error";
+                    });
+            } catch (e) {
+                console.error("graphviz error", e);
+            }
+
+            e.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/markdown/highlightRender.ts

@@ -0,0 +1,94 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {addStyle} from "../util/addStyle";
+
+export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Document = document,
+                                cdn = Constants.CDN) => {
+    let style = hljsOption.style;
+    if (!Constants.CODE_THEME.includes(style)) {
+        style = "github";
+    }
+    const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
+    const href = `${cdn}/dist/js/highlight.js/styles/${style}.min.css`;
+    if (vditorHljsStyle && vditorHljsStyle.getAttribute('href') !== href) {
+        vditorHljsStyle.remove();
+    }
+    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.min.css`, "vditorHljsStyle");
+
+    if (hljsOption.enable === false) {
+        return;
+    }
+
+    const codes = element.querySelectorAll("pre > code");
+    if (codes.length === 0) {
+        return;
+    }
+
+    addScript(`${cdn}/dist/js/highlight.js/highlight.min.js?v=11.7.0`, "vditorHljsScript").then(() => {
+        addScript(`${cdn}/dist/js/highlight.js/third-languages.js?v=1.0.1`, "vditorHljsThirdScript").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-flowchart") ||
+                    block.classList.contains("language-echarts") || block.classList.contains("language-mindmap") ||
+                    block.classList.contains("language-plantuml")|| block.classList.contains("language-smiles") ||
+                    block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
+                    block.classList.contains("language-math")) {
+                    return;
+                }
+
+                if (hljsOption.defaultLang !== "" && block.className.indexOf("language-") === -1) {
+                    block.classList.add("language-" + hljsOption.defaultLang)
+                }
+
+                let language = block.className.replace("language-", "");
+                if (!window.hljs.getLanguage(language)) {
+                    language = "plaintext";
+                }
+                block.innerHTML = window.hljs.highlight(
+                    block.textContent,
+                    {
+                        language,
+                        ignoreIllegals: true
+                    }).value;
+
+                block.classList.add("hljs");
+                if (!hljsOption.lineNumber) {
+                    return;
+                }
+
+                block.classList.add("vditor-linenumber");
+                let linenNumberTemp: HTMLDivElement = block.querySelector(".vditor-linenumber__temp");
+                if (!linenNumberTemp) {
+                    linenNumberTemp = document.createElement("div");
+                    linenNumberTemp.className = "vditor-linenumber__temp";
+                    block.insertAdjacentElement("beforeend", linenNumberTemp);
+                }
+                const whiteSpace = getComputedStyle(block).whiteSpace;
+                let isSoftWrap = false;
+                if (whiteSpace === "pre-wrap" || whiteSpace === "pre-line") {
+                    isSoftWrap = true;
+                }
+                let lineNumberHTML = "";
+                const lineList = block.textContent.split(/\r\n|\r|\n/g);
+                lineList.pop();
+                lineList.map((line) => {
+                    let lineHeight = "";
+                    if (isSoftWrap) {
+                        linenNumberTemp.textContent = line || "\n";
+                        lineHeight = ` style="height:${linenNumberTemp.getBoundingClientRect().height}px"`;
+                    }
+                    lineNumberHTML += `<span${lineHeight}></span>`;
+                });
+
+                linenNumberTemp.style.display = "none";
+                lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
+                block.insertAdjacentHTML("beforeend", lineNumberHTML);
+            })
+        })
+    });
+};