:sparkles: fix https://github.com/Vanessa219/vditor/issues/1540

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 ### v3.9.9 / 2024-01
 
+* [自定义渲染器支持](https://github.com/Vanessa219/vditor/issues/1540) `引入特性`
 
 ### v3.9.8 / 2023-12-26
 

README.md

@@ -217,6 +217,7 @@ Markdown 输出的 HTML 所展现的外观。内置 ant-design, light，dark，w
 | value | 编辑器初始化值 | '' |
 | theme | 主题：classic, dark | 'classic' |
 | icon | 图标风格：ant, material | 'ant' |
+| customRenders: {language: string, render: (element: HTMLElement, vditor: IVditor) => void}[] | 自定义渲染器 | [] |
 
 #### options.toolbar
 

README_en_US.md

@@ -193,6 +193,7 @@ Can be filled with element `id` or element itself` HTMLElement`
 | value | Editor initialization value | '' |
 | theme | Theme: classic, dark | 'classic' |
 | icon | icon theme: ant, material | 'ant' |
+| customRenders: {language: string, render: (element: HTMLElement, vditor: IVditor) => void}[] | Custom render | [] |
 
 #### options.toolbar
 

src/ts/preview/index.ts

@@ -232,6 +232,9 @@ export class Preview {
         plantumlRender(vditor.preview.previewElement, vditor.options.cdn);
         abcRender(vditor.preview.previewElement, vditor.options.cdn);
         mediaRender(vditor.preview.previewElement);
+        vditor.options.customRenders.forEach((item) => {
+            item.render(vditor.preview.previewElement, vditor);
+        })
         // toc render
         const editorElement = vditor.preview.element;
         let tocHTML = vditor.outline.render(vditor);

src/ts/util/Options.ts

@@ -20,6 +20,7 @@ export class Options {
             enable: false,
             type: "markdown",
         },
+        customRenders: [],
         debugger: false,
         fullscreen: {
             index: 90,

src/ts/util/processCode.ts

@@ -82,8 +82,16 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     } else if (language === "math") {
         mathRender(previewPanel, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
     } else {
-        highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
-        codeRender(previewPanel);
+        const cRender = vditor.options.customRenders.find((item) => {
+            if (item.language === language) {
+                item.render(previewPanel, vditor);
+                return true
+            }
+        })
+        if (!cRender) {
+            highlightRender(Object.assign({}, vditor.options.preview.hljs), previewPanel, vditor.options.cdn);
+            codeRender(previewPanel);
+        }
     }
 
     previewPanel.setAttribute("data-render", "1");

types/index.d.ts

@@ -722,7 +722,10 @@ interface IOptions {
     tab?: string;
     /** @link https://ld246.com/article/1549638745630#options-outline */
     outline?: IOutline;
-
+    customRenders?: {
+        language: string,
+        render: (element: HTMLElement, vditor: IVditor) => void
+    }[],
     /** 编辑器异步渲染完成后的回调方法 */
     after?(): void;