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

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 升级
 * 3.9
   * 添加 option.link 和 options.image
+  * 添加 hljs.defaultLang
 * 3.8
   * 添加 plantumlRender 方法
   * options.input 移除 previewElement 参数
@@ -105,8 +106,11 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 
-### v3.9.2 / 2023-05
+### v3.9.3 / 2023-05
 
+### v3.9.2 / 2023-04-11
+
+* [代码高亮不指定语言时使用 hljs.defaultLang 进行渲染](https://github.com/Vanessa219/vditor/issues/1382) `引入特性`
 * [选中文本后粘贴网址自动生成链接](https://github.com/Vanessa219/vditor/issues/1301) `改进功能`
 * [情景菜单输入框中 Esc/alt+Enter/Enter 可将光标设置到编辑器中](https://github.com/Vanessa219/vditor/issues/1302) `改进功能`
 * [文本选中弹出组件 speech 位置被多屏影响](https://github.com/Vanessa219/vditor/issues/1373) `改进功能`

README.md

@@ -302,6 +302,7 @@ new Vditor('vditor', {
 
 |   | 说明 | 默认值 |
 | - | - | - |
+| defaultLang | 未指定语言时默认使用该语言 | '' |
 | enable | 是否启用代码高亮 | true |
 | style | 可选值参见[Chroma](https://xyproto.github.io/splash/docs/longer/all.html) | `github` |
 | lineNumber | 是否启用行号 | false |

README_en_US.md

@@ -286,6 +286,7 @@ new Vditor('vditor', {
 
 |   | Explanation | Default |
 | - | - | - |
+| defaultLang | The language is used by default when no language is specified | '' |
 | enable | Whether to enable code syntax highlighting | true |
 | style | For optional values, see [Chroma](https://xyproto.github.io/splash/docs/longer/all.html) | `github` |
 | lineNumber | Whether to enable line number | false |

src/ts/constants.ts

@@ -47,6 +47,7 @@ export abstract class Constants {
   public static readonly HLJS_OPTIONS = {
     enable: true,
     lineNumber: false,
+    defaultLang: "",
     style: "github",
   };
   public static readonly MATH_OPTIONS: IMath = {

src/ts/markdown/highlightRender.ts

@@ -3,84 +3,88 @@ import {addScript} from "../util/addScript";
 import {addStyle} from "../util/addStyle";
 
 declare const hljs: {
-  highlightElement(element: Element): void;
+    highlightElement(element: Element): void;
 };
 
 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}.css`;
-  if (vditorHljsStyle && vditorHljsStyle.href !== href) {
-    vditorHljsStyle.remove();
-  }
-  addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
+    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}.css`;
+    if (vditorHljsStyle && vditorHljsStyle.href !== href) {
+        vditorHljsStyle.remove();
+    }
+    addStyle(`${cdn}/dist/js/highlight.js/styles/${style}.css`, "vditorHljsStyle");
 
-  if (hljsOption.enable === false) {
-    return;
-  }
+    if (hljsOption.enable === false) {
+        return;
+    }
 
-  const codes = element.querySelectorAll("pre > code");
-  if (codes.length === 0) {
-    return;
-  }
+    const codes = element.querySelectorAll("pre > code");
+    if (codes.length === 0) {
+        return;
+    }
 
-  addScript(`${cdn}/dist/js/highlight.js/highlight.pack.js`, "vditorHljsScript").then(() => {
-    addScript(`${cdn}/dist/js/highlight.js/solidity.min.js`, "vditorHljsSolidityScript").then(() => {
-      addScript(`${cdn}/dist/js/highlight.js/yul.min.js`, "vditorHljsYulScript").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;
-          }
+    addScript(`${cdn}/dist/js/highlight.js/highlight.pack.js`, "vditorHljsScript").then(() => {
+        addScript(`${cdn}/dist/js/highlight.js/solidity.min.js`, "vditorHljsSolidityScript").then(() => {
+            addScript(`${cdn}/dist/js/highlight.js/yul.min.js`, "vditorHljsYulScript").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-abc") || block.classList.contains("language-graphviz") ||
-            block.classList.contains("language-math")) {
-            return;
-          }
-          hljs.highlightElement(block);
+                    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-abc") || block.classList.contains("language-graphviz") ||
+                        block.classList.contains("language-math")) {
+                        return;
+                    }
 
-          if (!hljsOption.lineNumber) {
-            return;
-          }
+                    if (hljsOption.defaultLang !== "" && block.className.indexOf("language-") === -1) {
+                        block.classList.add("language-" + hljsOption.defaultLang)
+                    }
 
-          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>`;
-          });
+                    hljs.highlightElement(block);
 
-          linenNumberTemp.style.display = "none";
-          lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
-          block.insertAdjacentHTML("beforeend", lineNumberHTML);
-        });
-      })
-    })
-  });
+                    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);
+                });
+            })
+        })
+    });
 };

src/ts/util/processCode.ts

@@ -63,10 +63,6 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         return;
     }
     const language = previewPanel.firstElementChild.className.replace("language-", "");
-    if (!language) {
-        codeRender(previewPanel);
-        return;
-    }
     if (language === "abc") {
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {

types/index.d.ts

@@ -422,6 +422,8 @@ interface IMenuItem {
 
 /** @link https://ld246.com/article/1549638745630#options-preview-hljs */
 interface IHljs {
+    /** 代码块没有指定语言时，使用此值。默认值: "" */
+    defaultLang?: string;
     /** 是否启用行号。默认值: false */
     lineNumber?: boolean;
     /** 代码风格，可选值参见 [Chroma](https://xyproto.github.io/splash/docs/longer/all.html)。 默认值: 'github' */