:sparkles: fix #1203

CHANGELOG.md

@@ -98,6 +98,7 @@
 ### v3.8.13 / 2022-04
 
 * [1197](https://github.com/Vanessa219/vditor/issues/1197) 支持 dir 设置 `引入特性` `开发中`
+* [1203](https://github.com/Vanessa219/vditor/issues/1203) 支持 solidity, yul 语法 `引入特性`
 * [1176](https://github.com/Vanessa219/vditor/issues/1176) 代码规范 lint 从 Tslint 迁移至 Eslint `开发重构`
 * [1178](https://github.com/Vanessa219/vditor/issues/1198) 调用 insertValue 后第一次用户输入没有触发 input 回调函数 `修复缺陷`
 * [1179](https://github.com/Vanessa219/vditor/pull/1179) 更新代码风格工具&包管理工具 `开发重构`

src/js/highlight.js/solidity.min.js

@@ -0,0 +1,73 @@
+hljs.registerLanguage("solidity",(()=>{"use strict";function e(){try{return!0
+}catch(e){return!1}}
+var a=/-?(\b0[xX]([a-fA-F0-9]_?)*[a-fA-F0-9]|(\b[1-9](_?\d)*(\.((\d_?)*\d)?)?|\.\d(_?\d)*)([eE][-+]?\d(_?\d)*)?|\b0)(?!\w|\$)/
+;e()&&(a=a.source.replace(/\\b/g,"(?<!\\$)\\b"));var s={className:"number",
+begin:a,relevance:0},n={
+keyword:"assembly let function if switch case default for leave break continue u256 jump jumpi stop return revert selfdestruct invalid",
+built_in:"add sub mul div sdiv mod smod exp not lt gt slt sgt eq iszero and or xor byte shl shr sar addmod mulmod signextend keccak256 pc pop dup1 dup2 dup3 dup4 dup5 dup6 dup7 dup8 dup9 dup10 dup11 dup12 dup13 dup14 dup15 dup16 swap1 swap2 swap3 swap4 swap5 swap6 swap7 swap8 swap9 swap10 swap11 swap12 swap13 swap14 swap15 swap16 mload mstore mstore8 sload sstore msize gas address balance selfbalance caller callvalue calldataload calldatasize calldatacopy codesize codecopy extcodesize extcodecopy returndatasize returndatacopy extcodehash create create2 call callcode delegatecall staticcall log0 log1 log2 log3 log4 chainid origin gasprice basefee blockhash coinbase timestamp number difficulty gaslimit",
+literal:"true false"},i={className:"string",
+begin:/\bhex'(([0-9a-fA-F]{2}_?)*[0-9a-fA-F]{2})?'/},t={className:"string",
+begin:/\bhex"(([0-9a-fA-F]{2}_?)*[0-9a-fA-F]{2})?"/};function r(e){
+return e.inherit(e.APOS_STRING_MODE,{begin:/(\bunicode)?'/})}function l(e){
+return e.inherit(e.QUOTE_STRING_MODE,{begin:/(\bunicode)?"/})}var o={
+SOL_ASSEMBLY_KEYWORDS:n,baseAssembly:e=>{
+var a=r(e),o=l(e),c=/[A-Za-z_$][A-Za-z_$0-9.]*/,d=e.inherit(e.TITLE_MODE,{
+begin:/[A-Za-z$_][0-9A-Za-z$_]*/,lexemes:c,keywords:n}),u={className:"params",
+begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,lexemes:c,keywords:n,
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,a,o,s]},_={
+className:"operator",begin:/:=|->/};return{keywords:n,lexemes:c,
+contains:[a,o,i,t,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,s,_,{
+className:"function",lexemes:c,beginKeywords:"function",end:"{",excludeEnd:!0,
+contains:[d,u,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,_]}]}},
+solAposStringMode:r,solQuoteStringMode:l,HEX_APOS_STRING_MODE:i,
+HEX_QUOTE_STRING_MODE:t,SOL_NUMBER:s,isNegativeLookbehindAvailable:e}
+;const{baseAssembly:c,solAposStringMode:d,solQuoteStringMode:u,HEX_APOS_STRING_MODE:_,HEX_QUOTE_STRING_MODE:m,SOL_NUMBER:b,isNegativeLookbehindAvailable:g}=o
+;return e=>{for(var a=d(e),s=u(e),n=[],i=0;i<32;i++)n[i]=i+1
+;var t=n.map((e=>8*e)),r=[];for(i=0;i<=80;i++)r[i]=i
+;var l=n.map((e=>"bytes"+e)).join(" ")+" ",o=t.map((e=>"uint"+e)).join(" ")+" ",E=t.map((e=>"int"+e)).join(" ")+" ",M=[].concat.apply([],t.map((e=>r.map((a=>e+"x"+a))))),p={
+keyword:"var bool string int uint "+E+o+"byte bytes "+l+"fixed ufixed "+M.map((e=>"fixed"+e)).join(" ")+" "+M.map((e=>"ufixed"+e)).join(" ")+" enum struct mapping address new delete if else for while continue break return throw emit try catch revert unchecked _ function modifier event constructor fallback receive error virtual override constant immutable anonymous indexed storage memory calldata external public internal payable pure view private returns import from as using global pragma contract interface library is abstract type assembly",
+literal:"true false wei gwei szabo finney ether seconds minutes hours days weeks years",
+built_in:"self this super selfdestruct suicide now msg block tx abi blockhash gasleft assert require Error Panic sha3 sha256 keccak256 ripemd160 ecrecover addmod mulmod log0 log1 log2 log3 log4"
+},O={className:"operator",begin:/[+\-!~*\/%<>&^|=]/
+},C=/[A-Za-z_$][A-Za-z_$0-9]*/,N={className:"params",begin:/\(/,end:/\)/,
+excludeBegin:!0,excludeEnd:!0,lexemes:C,keywords:p,
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,a,s,b,"self"]},f={
+begin:/\.\s*/,end:/[^A-Za-z0-9$_\.]/,excludeBegin:!0,excludeEnd:!0,keywords:{
+built_in:"gas value selector address length push pop send transfer call callcode delegatecall staticcall balance code codehash wrap unwrap name creationCode runtimeCode interfaceId min max"
+},relevance:2},y=e.inherit(e.TITLE_MODE,{begin:/[A-Za-z$_][0-9A-Za-z$_]*/,
+lexemes:C,keywords:p}),w={className:"built_in",
+begin:(g()?"(?<!\\$)\\b":"\\b")+"(gas|value|salt)(?=:)"};function x(e,a){return{
+begin:(g()?"(?<!\\$)\\b":"\\b")+e+"\\.\\s*",end:/[^A-Za-z0-9$_\.]/,
+excludeBegin:!1,excludeEnd:!0,lexemes:C,keywords:{built_in:e+" "+a},
+contains:[f],relevance:10}}var h=c(e),v=e.inherit(h,{
+contains:h.contains.concat([{begin:/\./,end:/[^A-Za-z0-9$.]/,excludeBegin:!0,
+excludeEnd:!0,keywords:{built_in:"slot offset length address selector"},
+relevance:2},{begin:/_/,end:/[^A-Za-z0-9$.]/,excludeBegin:!0,excludeEnd:!0,
+keywords:{built_in:"slot offset"},relevance:2}])});return{aliases:["sol"],
+keywords:p,lexemes:C,
+contains:[a,s,_,m,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,b,w,O,{
+className:"function",lexemes:C,
+beginKeywords:"function modifier event constructor fallback receive error",
+end:/[{;]/,excludeEnd:!0,
+contains:[y,N,w,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],illegal:/%/
+},x("msg","gas value data sender sig"),x("block","blockhash coinbase difficulty gaslimit basefee number timestamp chainid"),x("tx","gasprice origin"),x("abi","decode encode encodePacked encodeWithSelector encodeWithSignature encodeCall"),x("bytes","concat"),x("string","concat"),f,{
+className:"class",lexemes:C,beginKeywords:"contract interface library",end:"{",
+excludeEnd:!0,illegal:/[:"\[\]]/,contains:[{beginKeywords:"is",lexemes:C
+},y,N,w,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{lexemes:C,
+beginKeywords:"struct enum",end:"{",excludeEnd:!0,illegal:/[:"\[\]]/,
+contains:[y,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{
+beginKeywords:"import",end:";",lexemes:C,keywords:"import from as",
+contains:[y,a,s,_,m,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,O]},{
+beginKeywords:"using",end:";",lexemes:C,keywords:"using for global",
+contains:[y,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,O]},{className:"meta",
+beginKeywords:"pragma",end:";",lexemes:C,keywords:{
+keyword:"pragma solidity experimental abicoder",
+built_in:"ABIEncoderV2 SMTChecker v1 v2"},
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,e.inherit(a,{
+className:"meta-string"}),e.inherit(s,{className:"meta-string"})]},{
+beginKeywords:"assembly",end:/\b\B/,
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,e.inherit(a,{
+className:"meta-string"}),e.inherit(s,{className:"meta-string"}),e.inherit(v,{
+begin:"{",end:"}",endsParent:!0,contains:v.contains.concat([e.inherit(v,{
+begin:"{",end:"}",contains:v.contains.concat(["self"])})])})]}],illegal:/#/}}
+})());

src/js/highlight.js/yul.min.js

@@ -0,0 +1,30 @@
+hljs.registerLanguage("yul",(()=>{"use strict";function e(){try{return!0
+}catch(e){return!1}}
+var a=/-?(\b0[xX]([a-fA-F0-9]_?)*[a-fA-F0-9]|(\b[1-9](_?\d)*(\.((\d_?)*\d)?)?|\.\d(_?\d)*)([eE][-+]?\d(_?\d)*)?|\b0)(?!\w|\$)/
+;e()&&(a=a.source.replace(/\\b/g,"(?<!\\$)\\b"));var s={className:"number",
+begin:a,relevance:0},t={
+keyword:"assembly let function if switch case default for leave break continue u256 jump jumpi stop return revert selfdestruct invalid",
+built_in:"add sub mul div sdiv mod smod exp not lt gt slt sgt eq iszero and or xor byte shl shr sar addmod mulmod signextend keccak256 pc pop dup1 dup2 dup3 dup4 dup5 dup6 dup7 dup8 dup9 dup10 dup11 dup12 dup13 dup14 dup15 dup16 swap1 swap2 swap3 swap4 swap5 swap6 swap7 swap8 swap9 swap10 swap11 swap12 swap13 swap14 swap15 swap16 mload mstore mstore8 sload sstore msize gas address balance selfbalance caller callvalue calldataload calldatasize calldatacopy codesize codecopy extcodesize extcodecopy returndatasize returndatacopy extcodehash create create2 call callcode delegatecall staticcall log0 log1 log2 log3 log4 chainid origin gasprice basefee blockhash coinbase timestamp number difficulty gaslimit",
+literal:"true false"},i={className:"string",
+begin:/\bhex'(([0-9a-fA-F]{2}_?)*[0-9a-fA-F]{2})?'/},l={className:"string",
+begin:/\bhex"(([0-9a-fA-F]{2}_?)*[0-9a-fA-F]{2})?"/};function d(e){
+return e.inherit(e.APOS_STRING_MODE,{begin:/(\bunicode)?'/})}function r(e){
+return e.inherit(e.QUOTE_STRING_MODE,{begin:/(\bunicode)?"/})}var n={
+SOL_ASSEMBLY_KEYWORDS:t,baseAssembly:e=>{
+var a=d(e),n=r(e),o=/[A-Za-z_$][A-Za-z_$0-9.]*/,c=e.inherit(e.TITLE_MODE,{
+begin:/[A-Za-z$_][0-9A-Za-z$_]*/,lexemes:o,keywords:t}),u={className:"params",
+begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,lexemes:o,keywords:t,
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,a,n,s]},b={
+className:"operator",begin:/:=|->/};return{keywords:t,lexemes:o,
+contains:[a,n,i,l,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,s,b,{
+className:"function",lexemes:o,beginKeywords:"function",end:"{",excludeEnd:!0,
+contains:[c,u,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,b]}]}},
+solAposStringMode:d,solQuoteStringMode:r,HEX_APOS_STRING_MODE:i,
+HEX_QUOTE_STRING_MODE:l,SOL_NUMBER:s,isNegativeLookbehindAvailable:e}
+;const{SOL_ASSEMBLY_KEYWORDS:o,baseAssembly:c,isNegativeLookbehindAvailable:u}=n
+;return e=>{var a={keyword:o.keyword+" object code data",
+built_in:o.built_in+" datasize dataoffset datacopy setimmutable loadimmutable linkersymbol memoryguard",
+literal:o.literal},s=/\bverbatim_[1-9]?[0-9]i_[1-9]?[0-9]o\b(?!\$)/
+;u()&&(s=s.source.replace(/\\b/,"(?<!\\$)\\b"));var t={className:"built_in",
+begin:s},i=c(e);return e.inherit(i,{keywords:a,contains:i.contains.concat([t])})
+}})());

src/ts/constants.ts

@@ -5,60 +5,63 @@ const _VDITOR_VERSION = VDITOR_VERSION;
 export {_VDITOR_VERSION as VDITOR_VERSION};
 
 export abstract class Constants {
-    public static readonly ZWSP: string = "\u200b";
-    public static readonly DROP_EDITOR: string = "application/editor";
-    public static readonly MOBILE_WIDTH: number = 520;
-    public static readonly CLASS_MENU_DISABLED: string = "vditor-menu--disabled";
-    public static readonly EDIT_TOOLBARS: string[] = ["emoji", "headings", "bold", "italic", "strike", "link", "list",
-        "ordered-list", "outdent", "indent", "check", "line", "quote", "code", "inline-code", "insert-after",
-        "insert-before", "upload", "record", "table"];
-    public static readonly CODE_THEME: string[] = ["abap", "algol", "algol_nu", "arduino", "autumn", "borland", "bw",
-        "colorful", "dracula", "emacs", "friendly", "fruity", "github", "igor", "lovelace", "manni", "monokai",
-        "monokailight", "murphy", "native", "paraiso-dark", "paraiso-light", "pastie", "perldoc", "pygments",
-        "rainbow_dash", "rrt", "solarized-dark", "solarized-dark256", "solarized-light", "swapoff", "tango", "trac",
-        "vim", "vs", "xcode", "ant-design"];
-    public static readonly CODE_LANGUAGES: string[] = ["mermaid", "echarts", "mindmap", "plantuml", "abc", "graphviz", "flowchart", "apache",
-        "js", "ts", "html",
-        // common
-        "properties", "apache", "bash", "c", "csharp", "cpp", "css", "coffeescript", "diff", "go", "xml", "http",
-        "json", "java", "javascript", "kotlin", "less", "lua", "makefile", "markdown", "nginx", "objectivec", "php",
-        "php-template", "perl", "plaintext", "python", "python-repl", "r", "ruby", "rust", "scss", "sql", "shell",
-        "swift", "ini", "typescript", "vbnet", "yaml",
-        "ada", "clojure", "dart", "erb", "fortran", "gradle", "haskell", "julia", "julia-repl", "lisp", "matlab",
-        "pgsql", "powershell", "sql_more", "stata", "cmake", "mathematica"];
-    public static readonly CDN = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
-    public static readonly MARKDOWN_OPTIONS = {
-        autoSpace: false,
-        codeBlockPreview: true,
-        fixTermTypo: false,
-        footnotes: true,
-        linkBase: "",
-        linkPrefix: "",
-        listStyle: false,
-        mark: false,
-        mathBlockPreview: true,
-        paragraphBeginningSpace: false,
-        sanitize: true,
-        toc: false,
-    };
-    public static readonly HLJS_OPTIONS = {
-        enable: true,
-        lineNumber: false,
-        style: "github",
-    };
-    public static readonly MATH_OPTIONS: IMath = {
-        engine: "KaTeX",
-        inlineDigit: false,
-        macros: {},
-    };
-    public static readonly THEME_OPTIONS = {
-        current: "light",
-        list: {
-            "ant-design": "Ant Design",
-            "dark": "Dark",
-            "light": "Light",
-            "wechat": "WeChat",
-        },
-        path: `${Constants.CDN}/dist/css/content-theme`,
-    };
+  public static readonly ZWSP: string = "\u200b";
+  public static readonly DROP_EDITOR: string = "application/editor";
+  public static readonly MOBILE_WIDTH: number = 520;
+  public static readonly CLASS_MENU_DISABLED: string = "vditor-menu--disabled";
+  public static readonly EDIT_TOOLBARS: string[] = ["emoji", "headings", "bold", "italic", "strike", "link", "list",
+    "ordered-list", "outdent", "indent", "check", "line", "quote", "code", "inline-code", "insert-after",
+    "insert-before", "upload", "record", "table"];
+  public static readonly CODE_THEME: string[] = ["abap", "algol", "algol_nu", "arduino", "autumn", "borland", "bw",
+    "colorful", "dracula", "emacs", "friendly", "fruity", "github", "igor", "lovelace", "manni", "monokai",
+    "monokailight", "murphy", "native", "paraiso-dark", "paraiso-light", "pastie", "perldoc", "pygments",
+    "rainbow_dash", "rrt", "solarized-dark", "solarized-dark256", "solarized-light", "swapoff", "tango", "trac",
+    "vim", "vs", "xcode", "ant-design"];
+  public static readonly CODE_LANGUAGES: string[] = ["mermaid", "echarts", "mindmap", "plantuml", "abc", "graphviz", "flowchart", "apache",
+    "js", "ts", "html",
+    // common
+    "properties", "apache", "bash", "c", "csharp", "cpp", "css", "coffeescript", "diff", "go", "xml", "http",
+    "json", "java", "javascript", "kotlin", "less", "lua", "makefile", "markdown", "nginx", "objectivec", "php",
+    "php-template", "perl", "plaintext", "python", "python-repl", "r", "ruby", "rust", "scss", "sql", "shell",
+    "swift", "ini", "typescript", "vbnet", "yaml",
+    "ada", "clojure", "dart", "erb", "fortran", "gradle", "haskell", "julia", "julia-repl", "lisp", "matlab",
+    "pgsql", "powershell", "sql_more", "stata", "cmake", "mathematica",
+    // ext
+    "solidity", "yul"
+  ];
+  public static readonly CDN = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`;
+  public static readonly MARKDOWN_OPTIONS = {
+    autoSpace: false,
+    codeBlockPreview: true,
+    fixTermTypo: false,
+    footnotes: true,
+    linkBase: "",
+    linkPrefix: "",
+    listStyle: false,
+    mark: false,
+    mathBlockPreview: true,
+    paragraphBeginningSpace: false,
+    sanitize: true,
+    toc: false,
+  };
+  public static readonly HLJS_OPTIONS = {
+    enable: true,
+    lineNumber: false,
+    style: "github",
+  };
+  public static readonly MATH_OPTIONS: IMath = {
+    engine: "KaTeX",
+    inlineDigit: false,
+    macros: {},
+  };
+  public static readonly THEME_OPTIONS = {
+    current: "light",
+    list: {
+      "ant-design": "Ant Design",
+      "dark": "Dark",
+      "light": "Light",
+      "wechat": "WeChat",
+    },
+    path: `${Constants.CDN}/dist/css/content-theme`,
+  };
 }

src/ts/markdown/highlightRender.ts

@@ -3,80 +3,84 @@ 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/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;
-            }
+          // 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;
+          }
+          hljs.highlightElement(block);
 
-            if (!hljsOption.lineNumber) {
-                return;
-            }
+          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;
+          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"`;
             }
-            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>`;
-            });
+            lineNumberHTML += `<span${lineHeight}></span>`;
+          });
 
-            linenNumberTemp.style.display = "none";
-            lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
-            block.insertAdjacentHTML("beforeend", lineNumberHTML);
+          linenNumberTemp.style.display = "none";
+          lineNumberHTML = `<span class="vditor-linenumber__rows">${lineNumberHTML}</span>`;
+          block.insertAdjacentHTML("beforeend", lineNumberHTML);
         });
-    });
+      })
+    })
+  });
 
 };