From a6f0e538126d31781cc7041160f8d89ced154b38 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Sat, 3 Dec 2022 16:56:52 +0800
Subject: [PATCH 1/8] docs: fix broken line numbers

---
 docs/.eleventy.js                            | 53 +++++++------
 docs/mdSyntaxHighlighter.js                  | 81 ++++++++++++++++++++
 docs/package.json                            |  1 +
 docs/src/assets/scss/syntax-highlighter.scss | 53 +++++++------
 4 files changed, 136 insertions(+), 52 deletions(-)
 create mode 100644 docs/mdSyntaxHighlighter.js

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 8ad469cc736..6b76d8d31f1 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -10,7 +10,7 @@ const Image = require("@11ty/eleventy-img");
 const path = require("path");
 const { slug } = require("github-slugger");
 const yaml = require("js-yaml");
-
+const { highlighter, preWrapperPlugin, lineNumberPlugin } = require("./mdSyntaxHighlighter");
 const {
     DateTime
 } = require("luxon");
@@ -145,7 +145,8 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.addPlugin(syntaxHighlight, {
-        alwaysWrapLineHighlights: true
+        alwaysWrapLineHighlights: true,
+        templateFormats: ["liquid", "njk"]
     });
     eleventyConfig.addPlugin(pluginRss);
     eleventyConfig.addPlugin(pluginTOC, {
@@ -186,30 +187,32 @@ module.exports = function(eleventyConfig) {
     }
 
     const markdownIt = require("markdown-it");
+    const md = markdownIt({ html: true, linkify: true, typographer: true, highlight: (str, lang) => highlighter(md, str, lang) })
+    .use(markdownItAnchor, {
+        slugify
+    })
+    .use(markdownItContainer, "correct", {})
+    .use(markdownItContainer, "incorrect", {})
+    .use(markdownItContainer, "warning", {
+        render(tokens, idx) {
+            return generateAlertMarkup("warning", tokens, idx);
+        }
+    })
+    .use(markdownItContainer, "tip", {
+        render(tokens, idx) {
+            return generateAlertMarkup("tip", tokens, idx);
+        }
+    })
+    .use(markdownItContainer, "important", {
+        render(tokens, idx) {
+            return generateAlertMarkup("important", tokens, idx);
+        }
+    })
+    .use(preWrapperPlugin)
+    .use(lineNumberPlugin)
+    .disable("code");
 
-    eleventyConfig.setLibrary("md",
-        markdownIt({ html: true, linkify: true, typographer: true })
-            .use(markdownItAnchor, {
-                slugify
-            })
-            .use(markdownItContainer, "correct", {})
-            .use(markdownItContainer, "incorrect", {})
-            .use(markdownItContainer, "warning", {
-                render(tokens, idx) {
-                    return generateAlertMarkup("warning", tokens, idx);
-                }
-            })
-            .use(markdownItContainer, "tip", {
-                render(tokens, idx) {
-                    return generateAlertMarkup("tip", tokens, idx);
-                }
-            })
-            .use(markdownItContainer, "important", {
-                render(tokens, idx) {
-                    return generateAlertMarkup("important", tokens, idx);
-                }
-            })
-            .disable("code"));
+    eleventyConfig.setLibrary("md", md);
 
     //------------------------------------------------------------------------------
     // Shortcodes
diff --git a/docs/mdSyntaxHighlighter.js b/docs/mdSyntaxHighlighter.js
new file mode 100644
index 00000000000..ce809ee042f
--- /dev/null
+++ b/docs/mdSyntaxHighlighter.js
@@ -0,0 +1,81 @@
+/** @typedef {import("markdown-it")} MarkdownIt */
+
+const Prism = require("prismjs");
+const loadLanguages = require("prismjs/components/");
+
+/**
+ *
+ * @param {MarkdownIt} md markdown-it
+ * @param {string} str code
+ * @param {string} lang code language
+ * @returns
+ */
+const highlighter = function (md, str, lang) {
+    let result = "";
+    if (lang) {
+        try {
+            loadLanguages([lang]);
+            result = Prism.highlight(str, Prism.languages[lang], lang);
+        } catch (err) {
+            console.log(err);
+        }
+    } else {
+        result = md.utils.escapeHtml(str);
+    }
+
+    return `<pre><code>${result}</code></pre>`;
+};
+
+/**
+ *
+ * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/preWrapper.ts
+ * @param {MarkdownIt} md
+ */
+const preWrapperPlugin = (md) => {
+    const fence = md.renderer.rules.fence;
+    md.renderer.rules.fence = (...args) => {
+        const [tokens, idx] = args;
+        const lang = tokens[idx].info.trim();
+        const rawCode = fence(...args);
+        return `<div class="language-${lang}">${rawCode}</div>`;
+    };
+};
+
+/**
+ *
+ * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/lineNumbers.ts
+ * @param {MarkdownIt} md
+ */
+const lineNumberPlugin = (md) => {
+    const fence = md.renderer.rules.fence;
+    md.renderer.rules.fence = (...args) => {
+        const [tokens, idx] = args;
+        const lang = tokens[idx].info.trim();
+        const rawCode = fence(...args);
+        const code = rawCode.slice(
+            rawCode.indexOf("<code>"),
+            rawCode.indexOf("</code>")
+        );
+        const lines = code.split("\n");
+        const lineNumbersCode = [...Array(lines.length - 1)]
+            .map(
+                (line, index) =>
+                    `<span class="line-number">${index + 1}</span><br>`
+            )
+            .join("");
+
+        const lineNumbersWrapperCode = `<div class="line-numbers-wrapper">${lineNumbersCode}</div>`;
+
+        const finalCode = rawCode
+            .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
+            .replace(/"(language-\S*?)"/, '"$1 line-numbers-mode"')
+            .replace(/<code>/, `<code class="language-${lang}">`)
+            .replace(/<pre>/, `<pre class="language-${lang}">`);
+
+        return finalCode;
+    };
+};
+
+module.exports.highlighter = highlighter;
+module.exports.preWrapperPlugin = preWrapperPlugin;
+module.exports.lineNumberPlugin = lineNumberPlugin;
diff --git a/docs/package.json b/docs/package.json
index 91056615833..c9935e99321 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -42,6 +42,7 @@
         "netlify-cli": "^10.3.1",
         "npm-run-all": "^4.1.5",
         "postcss-html": "^1.5.0",
+        "prismjs": "^1.29.0",
         "rimraf": "^3.0.2",
         "sass": "^1.52.1",
         "stylelint": "^14.13.0",
diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index cb26ac75af4..61e0a1066d7 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -1,12 +1,7 @@
 code[class*="language-"],
 pre[class*="language-"] {
-    font-family:
-        var(--mono-font),
-        Consolas,
-        Monaco,
-        "Andale Mono",
-        "Ubuntu Mono",
-        monospace;
+    font-family: var(--mono-font), Consolas, Monaco, "Andale Mono",
+        "Ubuntu Mono", monospace;
     font-size: 1em;
     text-align: left;
     white-space: pre;
@@ -32,7 +27,7 @@ pre[class*="language-"] {
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+div[class*="language-"] {
     padding: 1.5rem;
     margin: 1.5rem 0;
     overflow: auto;
@@ -52,8 +47,8 @@ pre[class*="language-"] {
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-    padding: .1em;
-    border-radius: .3em;
+    padding: 0.1em;
+    border-radius: 0.3em;
     white-space: normal;
 }
 
@@ -69,7 +64,7 @@ pre[class*="language-"] {
 }
 
 .token.namespace {
-    opacity: .7;
+    opacity: 0.7;
 }
 
 .token.selector,
@@ -100,25 +95,29 @@ pre[class*="language-"] {
     cursor: help;
 }
 
-pre {
-    counter-reset: lineNumber;
-}
-
-code .highlight-line {
-    font-variant-ligatures: none;
+.line-numbers-wrapper {
+    position: absolute;
+    top: 0;
+    text-align: right;
+    padding-top: 1.5rem;
+    font-size: 1em;
+    font-family: var(--mono-font),Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
+    line-height: 1.5;
+    color: var(--icon-color);
 }
-
-code .highlight-line::before {
-    -webkit-user-select: none;
+.line-number {
+    user-select: none;
     color: var(--icon-color);
-    content: counter(lineNumber);
-    counter-increment: lineNumber;
     display: inline-block;
     font-variant-numeric: tabular-nums;
-    margin-right: 1.2em;
-    padding-right: 1.2em;
-    margin-inline-end: 1.2em;
-    padding-inline-end: 1.2em;
     text-align: right;
-    width: 2.4em;
+    width: 1.2em;
+}
+div[class*=language-].line-numbers-mode {
+    position: relative;
+}
+div[class*=language-].line-numbers-mode pre[class*=language-] {
+    padding-left: calc(2.4em + 1.2rem);
+    margin-top: 0;
+    margin-bottom: 0;
 }

From 9e8d59782cb84692fbc3b8f3140dc8810d1f671e Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Sat, 3 Dec 2022 18:39:52 +0800
Subject: [PATCH 2/8] docs: fix scss styles

---
 docs/src/assets/scss/syntax-highlighter.scss | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index 61e0a1066d7..7d3c7e3c289 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -1,7 +1,12 @@
 code[class*="language-"],
 pre[class*="language-"] {
-    font-family: var(--mono-font), Consolas, Monaco, "Andale Mono",
-        "Ubuntu Mono", monospace;
+    font-family:
+        var(--mono-font),
+        Consolas,
+        Monaco,
+        "Andale Mono",
+        "Ubuntu Mono",
+        monospace;
     font-size: 1em;
     text-align: left;
     white-space: pre;
@@ -101,10 +106,11 @@ pre[class*="language-"] {
     text-align: right;
     padding-top: 1.5rem;
     font-size: 1em;
-    font-family: var(--mono-font),Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
+    font-family: var(--mono-font), Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
     line-height: 1.5;
     color: var(--icon-color);
 }
+
 .line-number {
     user-select: none;
     color: var(--icon-color);
@@ -113,10 +119,12 @@ pre[class*="language-"] {
     text-align: right;
     width: 1.2em;
 }
-div[class*=language-].line-numbers-mode {
+
+div[class*="language-"].line-numbers-mode {
     position: relative;
 }
-div[class*=language-].line-numbers-mode pre[class*=language-] {
+
+div[class*="language-"].line-numbers-mode pre[class*="language-"] {
     padding-left: calc(2.4em + 1.2rem);
     margin-top: 0;
     margin-bottom: 0;

From c1210e554b455a97b571a168d428984fe76b1c1f Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Sat, 3 Dec 2022 19:37:14 +0800
Subject: [PATCH 3/8] docs: fix lint errors

---
 docs/.eleventy.js | 46 +++++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 6b76d8d31f1..11db2e9e33a 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -188,29 +188,29 @@ module.exports = function(eleventyConfig) {
 
     const markdownIt = require("markdown-it");
     const md = markdownIt({ html: true, linkify: true, typographer: true, highlight: (str, lang) => highlighter(md, str, lang) })
-    .use(markdownItAnchor, {
-        slugify
-    })
-    .use(markdownItContainer, "correct", {})
-    .use(markdownItContainer, "incorrect", {})
-    .use(markdownItContainer, "warning", {
-        render(tokens, idx) {
-            return generateAlertMarkup("warning", tokens, idx);
-        }
-    })
-    .use(markdownItContainer, "tip", {
-        render(tokens, idx) {
-            return generateAlertMarkup("tip", tokens, idx);
-        }
-    })
-    .use(markdownItContainer, "important", {
-        render(tokens, idx) {
-            return generateAlertMarkup("important", tokens, idx);
-        }
-    })
-    .use(preWrapperPlugin)
-    .use(lineNumberPlugin)
-    .disable("code");
+        .use(markdownItAnchor, {
+            slugify
+        })
+        .use(markdownItContainer, "correct", {})
+        .use(markdownItContainer, "incorrect", {})
+        .use(markdownItContainer, "warning", {
+            render(tokens, idx) {
+                return generateAlertMarkup("warning", tokens, idx);
+            }
+        })
+        .use(markdownItContainer, "tip", {
+            render(tokens, idx) {
+                return generateAlertMarkup("tip", tokens, idx);
+            }
+        })
+        .use(markdownItContainer, "important", {
+            render(tokens, idx) {
+                return generateAlertMarkup("important", tokens, idx);
+            }
+        })
+        .use(preWrapperPlugin)
+        .use(lineNumberPlugin)
+        .disable("code");
 
     eleventyConfig.setLibrary("md", md);
 

From e5a478e2e17f37c3762c1de29689f13c22977d47 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Mon, 5 Dec 2022 22:26:24 +0800
Subject: [PATCH 4/8] Update docs/src/assets/scss/syntax-highlighter.scss

Co-authored-by: Strek <ssharishkumar@gmail.com>
---
 docs/src/assets/scss/syntax-highlighter.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index 7d3c7e3c289..16abc224738 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -122,10 +122,11 @@ pre[class*="language-"] {
 
 div[class*="language-"].line-numbers-mode {
     position: relative;
+    pre[class*="language-"] {
+        padding-left: calc(2.4em + 1.2rem);
+        margin-top: 0;
+        margin-bottom: 0;
+        
+    }
 }
-
-div[class*="language-"].line-numbers-mode pre[class*="language-"] {
-    padding-left: calc(2.4em + 1.2rem);
-    margin-top: 0;
-    margin-bottom: 0;
 }

From 39c801b33f61adaa25029aec8c20d5ec29fa28d9 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Mon, 5 Dec 2022 22:28:01 +0800
Subject: [PATCH 5/8] docs: fix scss

---
 docs/src/assets/scss/syntax-highlighter.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index 16abc224738..18269425cb1 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -122,11 +122,10 @@ pre[class*="language-"] {
 
 div[class*="language-"].line-numbers-mode {
     position: relative;
+
     pre[class*="language-"] {
         padding-left: calc(2.4em + 1.2rem);
         margin-top: 0;
         margin-bottom: 0;
-        
     }
 }
-}

From 758d37f2b071b8dab82d6ff9e06c27f720c5e86d Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Wed, 7 Dec 2022 08:34:20 +0800
Subject: [PATCH 6/8] docs: move file and add license

---
 docs/.eleventy.js                          |  2 +-
 docs/src/_plugins/LICENSE                  | 21 ++++++
 docs/src/_plugins/md-syntax-highlighter.js | 81 ++++++++++++++++++++++
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/_plugins/LICENSE
 create mode 100644 docs/src/_plugins/md-syntax-highlighter.js

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 11db2e9e33a..32666ec624d 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -10,7 +10,7 @@ const Image = require("@11ty/eleventy-img");
 const path = require("path");
 const { slug } = require("github-slugger");
 const yaml = require("js-yaml");
-const { highlighter, preWrapperPlugin, lineNumberPlugin } = require("./mdSyntaxHighlighter");
+const { highlighter, preWrapperPlugin, lineNumberPlugin } = require("./src/_plugins/md-syntax-highlighter");
 const {
     DateTime
 } = require("luxon");
diff --git a/docs/src/_plugins/LICENSE b/docs/src/_plugins/LICENSE
new file mode 100644
index 00000000000..93a89715323
--- /dev/null
+++ b/docs/src/_plugins/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/docs/src/_plugins/md-syntax-highlighter.js b/docs/src/_plugins/md-syntax-highlighter.js
new file mode 100644
index 00000000000..ce809ee042f
--- /dev/null
+++ b/docs/src/_plugins/md-syntax-highlighter.js
@@ -0,0 +1,81 @@
+/** @typedef {import("markdown-it")} MarkdownIt */
+
+const Prism = require("prismjs");
+const loadLanguages = require("prismjs/components/");
+
+/**
+ *
+ * @param {MarkdownIt} md markdown-it
+ * @param {string} str code
+ * @param {string} lang code language
+ * @returns
+ */
+const highlighter = function (md, str, lang) {
+    let result = "";
+    if (lang) {
+        try {
+            loadLanguages([lang]);
+            result = Prism.highlight(str, Prism.languages[lang], lang);
+        } catch (err) {
+            console.log(err);
+        }
+    } else {
+        result = md.utils.escapeHtml(str);
+    }
+
+    return `<pre><code>${result}</code></pre>`;
+};
+
+/**
+ *
+ * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/preWrapper.ts
+ * @param {MarkdownIt} md
+ */
+const preWrapperPlugin = (md) => {
+    const fence = md.renderer.rules.fence;
+    md.renderer.rules.fence = (...args) => {
+        const [tokens, idx] = args;
+        const lang = tokens[idx].info.trim();
+        const rawCode = fence(...args);
+        return `<div class="language-${lang}">${rawCode}</div>`;
+    };
+};
+
+/**
+ *
+ * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/lineNumbers.ts
+ * @param {MarkdownIt} md
+ */
+const lineNumberPlugin = (md) => {
+    const fence = md.renderer.rules.fence;
+    md.renderer.rules.fence = (...args) => {
+        const [tokens, idx] = args;
+        const lang = tokens[idx].info.trim();
+        const rawCode = fence(...args);
+        const code = rawCode.slice(
+            rawCode.indexOf("<code>"),
+            rawCode.indexOf("</code>")
+        );
+        const lines = code.split("\n");
+        const lineNumbersCode = [...Array(lines.length - 1)]
+            .map(
+                (line, index) =>
+                    `<span class="line-number">${index + 1}</span><br>`
+            )
+            .join("");
+
+        const lineNumbersWrapperCode = `<div class="line-numbers-wrapper">${lineNumbersCode}</div>`;
+
+        const finalCode = rawCode
+            .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
+            .replace(/"(language-\S*?)"/, '"$1 line-numbers-mode"')
+            .replace(/<code>/, `<code class="language-${lang}">`)
+            .replace(/<pre>/, `<pre class="language-${lang}">`);
+
+        return finalCode;
+    };
+};
+
+module.exports.highlighter = highlighter;
+module.exports.preWrapperPlugin = preWrapperPlugin;
+module.exports.lineNumberPlugin = lineNumberPlugin;

From 2dde17d71ba149e23de65879dc7700701a0f3280 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Wed, 7 Dec 2022 08:55:38 +0800
Subject: [PATCH 7/8] add aria-hidden

---
 docs/mdSyntaxHighlighter.js                | 81 ----------------------
 docs/src/_plugins/md-syntax-highlighter.js |  2 +-
 2 files changed, 1 insertion(+), 82 deletions(-)
 delete mode 100644 docs/mdSyntaxHighlighter.js

diff --git a/docs/mdSyntaxHighlighter.js b/docs/mdSyntaxHighlighter.js
deleted file mode 100644
index ce809ee042f..00000000000
--- a/docs/mdSyntaxHighlighter.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/** @typedef {import("markdown-it")} MarkdownIt */
-
-const Prism = require("prismjs");
-const loadLanguages = require("prismjs/components/");
-
-/**
- *
- * @param {MarkdownIt} md markdown-it
- * @param {string} str code
- * @param {string} lang code language
- * @returns
- */
-const highlighter = function (md, str, lang) {
-    let result = "";
-    if (lang) {
-        try {
-            loadLanguages([lang]);
-            result = Prism.highlight(str, Prism.languages[lang], lang);
-        } catch (err) {
-            console.log(err);
-        }
-    } else {
-        result = md.utils.escapeHtml(str);
-    }
-
-    return `<pre><code>${result}</code></pre>`;
-};
-
-/**
- *
- * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/preWrapper.ts
- * @param {MarkdownIt} md
- */
-const preWrapperPlugin = (md) => {
-    const fence = md.renderer.rules.fence;
-    md.renderer.rules.fence = (...args) => {
-        const [tokens, idx] = args;
-        const lang = tokens[idx].info.trim();
-        const rawCode = fence(...args);
-        return `<div class="language-${lang}">${rawCode}</div>`;
-    };
-};
-
-/**
- *
- * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/lineNumbers.ts
- * @param {MarkdownIt} md
- */
-const lineNumberPlugin = (md) => {
-    const fence = md.renderer.rules.fence;
-    md.renderer.rules.fence = (...args) => {
-        const [tokens, idx] = args;
-        const lang = tokens[idx].info.trim();
-        const rawCode = fence(...args);
-        const code = rawCode.slice(
-            rawCode.indexOf("<code>"),
-            rawCode.indexOf("</code>")
-        );
-        const lines = code.split("\n");
-        const lineNumbersCode = [...Array(lines.length - 1)]
-            .map(
-                (line, index) =>
-                    `<span class="line-number">${index + 1}</span><br>`
-            )
-            .join("");
-
-        const lineNumbersWrapperCode = `<div class="line-numbers-wrapper">${lineNumbersCode}</div>`;
-
-        const finalCode = rawCode
-            .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
-            .replace(/"(language-\S*?)"/, '"$1 line-numbers-mode"')
-            .replace(/<code>/, `<code class="language-${lang}">`)
-            .replace(/<pre>/, `<pre class="language-${lang}">`);
-
-        return finalCode;
-    };
-};
-
-module.exports.highlighter = highlighter;
-module.exports.preWrapperPlugin = preWrapperPlugin;
-module.exports.lineNumberPlugin = lineNumberPlugin;
diff --git a/docs/src/_plugins/md-syntax-highlighter.js b/docs/src/_plugins/md-syntax-highlighter.js
index ce809ee042f..9642bcc2cfb 100644
--- a/docs/src/_plugins/md-syntax-highlighter.js
+++ b/docs/src/_plugins/md-syntax-highlighter.js
@@ -64,7 +64,7 @@ const lineNumberPlugin = (md) => {
             )
             .join("");
 
-        const lineNumbersWrapperCode = `<div class="line-numbers-wrapper">${lineNumbersCode}</div>`;
+        const lineNumbersWrapperCode = `<div class="line-numbers-wrapper" aria-hidden="true">${lineNumbersCode}</div>`;
 
         const finalCode = rawCode
             .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)

From 90c94157977a54e19c10e5b5236b0eaf77d4a684 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Wed, 7 Dec 2022 12:03:32 +0800
Subject: [PATCH 8/8] add license to file header

---
 docs/src/_plugins/LICENSE                  | 21 -----------------
 docs/src/_plugins/md-syntax-highlighter.js | 26 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 21 deletions(-)
 delete mode 100644 docs/src/_plugins/LICENSE

diff --git a/docs/src/_plugins/LICENSE b/docs/src/_plugins/LICENSE
deleted file mode 100644
index 93a89715323..00000000000
--- a/docs/src/_plugins/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019-present, Yuxi (Evan) You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/docs/src/_plugins/md-syntax-highlighter.js b/docs/src/_plugins/md-syntax-highlighter.js
index 9642bcc2cfb..c886043821b 100644
--- a/docs/src/_plugins/md-syntax-highlighter.js
+++ b/docs/src/_plugins/md-syntax-highlighter.js
@@ -1,3 +1,27 @@
+/**
+ * MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+
 /** @typedef {import("markdown-it")} MarkdownIt */
 
 const Prism = require("prismjs");
@@ -30,6 +54,7 @@ const highlighter = function (md, str, lang) {
  *
  * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/preWrapper.ts
  * @param {MarkdownIt} md
+ * @license MIT License. See file header.
  */
 const preWrapperPlugin = (md) => {
     const fence = md.renderer.rules.fence;
@@ -45,6 +70,7 @@ const preWrapperPlugin = (md) => {
  *
  * modified from https://github.com/vuejs/vitepress/blob/main/src/node/markdown/plugins/lineNumbers.ts
  * @param {MarkdownIt} md
+ * @license MIT License. See file header.
  */
 const lineNumberPlugin = (md) => {
     const fence = md.renderer.rules.fence;