:sparkles: https://github.com/Vanessa219/vditor/issues/1158

src/assets/less/_reset.less

@@ -231,6 +231,7 @@
         .language-mindmap,
         .language-plantuml,
         .language-mermaid,
+        .language-smiles,
         .language-markmap,
         .language-abc,
         .language-flowchart,

src/method.ts

@@ -9,6 +9,7 @@ import {lazyLoadImageRender} from "./ts/markdown/lazyLoadImageRender";
 import {mathRender} from "./ts/markdown/mathRender";
 import {mediaRender} from "./ts/markdown/mediaRender";
 import {mermaidRender} from "./ts/markdown/mermaidRender";
+import {SMILESRender} from "./ts/markdown/SMILESRender";
 import {markmapRender} from "./ts/markdown/markmapRender";
 import {mindmapRender} from "./ts/markdown/mindmapRender";
 import {outlineRender} from "./ts/markdown/outlineRender";
@@ -35,6 +36,8 @@ class Vditor {
     public static mathRender = mathRender;
     /** 流程图/时序图/甘特图渲染 */
     public static mermaidRender = mermaidRender;
+    /** 化学物质结构渲染 */
+    public static SMILESRender = SMILESRender;
     /** 支持markdown的思维导图 */
     public static markmapRender = markmapRender;
     /** flowchart.js 渲染 */

src/ts/constants.ts

@@ -44,7 +44,7 @@ export abstract class Constants {
         "stackoverflow-light", "tokyo-night-light", "vs", "xcode", "default"];
     public static readonly ALIAS_CODE_LANGUAGES: string[] = [
         // 自定义
-        "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math", "markmap",
+        "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math", "markmap", "smiles",
         // 别名
         "js", "ts", "html", "toml", "c#", "bat"
     ];

src/ts/export/index.ts

@@ -69,7 +69,8 @@ export const exportHTML = (vditor: IVditor) => {
         math: ${JSON.stringify(vditor.options.preview.math)},
     });
     Vditor.mermaidRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
-    Vditor.markmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.SMILESRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
+    Vditor.markmapRender(previewElement, '${vditor.options.cdn}');
     Vditor.flowchartRender(previewElement, '${vditor.options.cdn}');
     Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
     Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');

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");
+            });
+        });
+    }
+};

src/ts/markdown/adapterRender.ts

@@ -1,15 +1,19 @@
 export const mathRenderAdapter = {
-    getCode: (mathElement: Element) => mathElement.textContent,
-    getElements: (element: HTMLElement) => element.querySelectorAll(".language-math"),
+    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) => element.querySelectorAll(".language-mermaid"),
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-mermaid"),
 };
 export const markmapRenderAdapter = {
     getCode: (el: Element) => el.textContent,
-    getElements: (element: HTMLElement) => element.querySelectorAll(".language-markmap"),
+    getElements: (element: HTMLElement| Document) => element.querySelectorAll(".language-markmap"),
 };
 export const mindmapRenderAdapter = {
     getCode: (el: Element) => el.getAttribute("data-code"),

src/ts/markdown/codeRender.ts

@@ -11,7 +11,7 @@ export const codeRender = (element: HTMLElement, option?: IHljs) => {
             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-math") || e.classList.contains("language-smiles")) {
             return false;
         }
 

src/ts/markdown/highlightRender.ts

@@ -35,7 +35,7 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
 
                 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-plantuml")|| block.classList.contains("language-smiles") ||
                     block.classList.contains("language-abc") || block.classList.contains("language-graphviz") ||
                     block.classList.contains("language-math")) {
                     return;

src/ts/markdown/markmapRender.ts

@@ -32,12 +32,12 @@ const init = (el: HTMLElement,code: string) => {
   }
 
 
-export const markmapRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
+export const markmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
     const markmapElements = markmapRenderAdapter.getElements(element);
     if (markmapElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/dist/js/markmap/markmap.min.js`, "vditorMermaidScript").then(() => {
+    addScript(`${cdn}/dist/js/markmap/markmap.min.js`, "vditorMarkerScript").then(() => {
         markmapElements.forEach((item) => {
             const code = markmapRenderAdapter.getCode(item);
             if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
@@ -53,5 +53,4 @@ export const markmapRender = (element: HTMLElement, cdn = Constants.CDN, theme:
             }
         });
     });
-
 };

src/ts/markdown/mathRender.ts

@@ -18,7 +18,7 @@ declare global {
     }
 }
 
-export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
+export const mathRender = (element: (HTMLElement | Document) = document, options?: { cdn?: string, math?: IMath }) => {
     const mathElements = mathRenderAdapter.getElements(element);
 
     if (mathElements.length === 0) {

src/ts/markdown/mermaidRender.ts

@@ -8,7 +8,7 @@ declare const mermaid: {
     render(id: string, text: string): { svg: string }
 };
 
-export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
+export const mermaidRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
     const mermaidElements = mermaidRenderAdapter.getElements(element);
     if (mermaidElements.length === 0) {
         return;
@@ -44,7 +44,7 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
             if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
             }
-            const id = "mermaid"+genUUID()
+            const id = "mermaid" + genUUID()
             try {
                 const mermaidData = await mermaid.render(id, item.textContent);
                 item.innerHTML = mermaidData.svg;

src/ts/markdown/previewRender.ts

@@ -1,6 +1,6 @@
 import {Constants} from "../constants";
 import {setContentTheme} from "../ui/setContentTheme";
-import {addScript, addScriptSync} from "../util/addScript";
+import {addScript} from "../util/addScript";
 import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {merge} from "../util/merge";
 import {abcRender} from "./abcRender";
@@ -14,7 +14,8 @@ import {lazyLoadImageRender} from "./lazyLoadImageRender";
 import {mathRender} from "./mathRender";
 import {mediaRender} from "./mediaRender";
 import {mermaidRender} from "./mermaidRender";
-import {markmapRender} from "../markdown/markmapRender";
+import {markmapRender} from "./markmapRender";
+import {SMILESRender} from "./SMILESRender";
 import {mindmapRender} from "./mindmapRender";
 import {plantumlRender} from "./plantumlRender";
 import {setLute} from "./setLute";
@@ -131,7 +132,8 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
         math: mergedOptions.math,
     });
     mermaidRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
-    markmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    SMILESRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    markmapRender(previewElement, mergedOptions.cdn);
     flowchartRender(previewElement, mergedOptions.cdn);
     graphvizRender(previewElement, mergedOptions.cdn);
     chartRender(previewElement, mergedOptions.cdn, mergedOptions.mode);

src/ts/preview/index.ts

@@ -8,6 +8,7 @@ import {highlightRender} from "../markdown/highlightRender";
 import {mathRender} from "../markdown/mathRender";
 import {mediaRender} from "../markdown/mediaRender";
 import {mermaidRender} from "../markdown/mermaidRender";
+import {SMILESRender} from "../markdown/SMILESRender";
 import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
@@ -224,7 +225,8 @@ export class Preview {
         highlightRender(vditor.options.preview.hljs, vditor.preview.previewElement,
             vditor.options.cdn);
         mermaidRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
-        markmapRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
+        markmapRender(vditor.preview.previewElement, vditor.options.cdn);
+        SMILESRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         flowchartRender(vditor.preview.previewElement, vditor.options.cdn);
         graphvizRender(vditor.preview.previewElement, vditor.options.cdn);
         chartRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);

src/ts/util/processCode.ts

@@ -9,6 +9,7 @@ import {mermaidRender} from "../markdown/mermaidRender";
 import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
+import {SMILESRender} from "../markdown/SMILESRender";
 
 export const processPasteCode = (html: string, text: string, type = "sv") => {
     const tempElement = document.createElement("div");
@@ -67,8 +68,10 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {
         mermaidRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "smiles") {
+        SMILESRender(previewPanel, vditor.options.cdn, vditor.options.theme);
     } else if (language === "markmap") {
-        markmapRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+        markmapRender(previewPanel, vditor.options.cdn);
     } else if (language === "flowchart") {
         flowchartRender(previewPanel, vditor.options.cdn);
     } else if (language === "echarts") {