From 609a54db91934d1b34718d28ec8b0802c64f9f49 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Thu, 15 Dec 2022 11:09:06 +0800
Subject: [PATCH 1/5] docs: optimize code block structure

---
 docs/.eleventy.js                            |  3 +-
 docs/src/_plugins/md-syntax-highlighter.js   | 22 ++------------
 docs/src/assets/scss/syntax-highlighter.scss | 31 ++++++++------------
 3 files changed, 16 insertions(+), 40 deletions(-)

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 87dc13b5faf..374ab1b93e5 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("./src/_plugins/md-syntax-highlighter");
+const { highlighter, lineNumberPlugin } = require("./src/_plugins/md-syntax-highlighter");
 const {
     DateTime
 } = require("luxon");
@@ -208,7 +208,6 @@ module.exports = function(eleventyConfig) {
                 return generateAlertMarkup("important", tokens, idx);
             }
         })
-        .use(preWrapperPlugin)
         .use(lineNumberPlugin)
         .disable("code");
 
diff --git a/docs/src/_plugins/md-syntax-highlighter.js b/docs/src/_plugins/md-syntax-highlighter.js
index c886043821b..6f49a37ce00 100644
--- a/docs/src/_plugins/md-syntax-highlighter.js
+++ b/docs/src/_plugins/md-syntax-highlighter.js
@@ -47,23 +47,7 @@ const highlighter = function (md, str, lang) {
         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
- * @license MIT License. See file header.
- */
-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>`;
-    };
+    return `<pre class="language-${lang}"><code>${result}</code></pre>`;
 };
 
 /**
@@ -93,15 +77,13 @@ const lineNumberPlugin = (md) => {
         const lineNumbersWrapperCode = `<div class="line-numbers-wrapper" aria-hidden="true">${lineNumbersCode}</div>`;
 
         const finalCode = rawCode
-            .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
+            .replace(/<\/pre>\n/, `${lineNumbersWrapperCode}</pre>`)
             .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/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index 18269425cb1..90752c52917 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -32,7 +32,7 @@ pre[class*="language-"] {
 }
 
 /* Code blocks */
-div[class*="language-"] {
+pre[class*="language-"] {
     padding: 1.5rem;
     margin: 1.5rem 0;
     overflow: auto;
@@ -43,6 +43,10 @@ div[class*="language-"] {
     [data-theme="dark"] & {
         color: var(--color-neutral-100);
     }
+
+    &.line-numbers-mode {
+        padding-left: calc(1.5rem + 2.4em + 1.2rem);
+    }
 }
 
 :not(pre) > code[class*="language-"],
@@ -103,29 +107,20 @@ pre[class*="language-"] {
 .line-numbers-wrapper {
     position: absolute;
     top: 0;
+    left: 1.5rem;
     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);
-}
-
-.line-number {
-    user-select: none;
-    color: var(--icon-color);
-    display: inline-block;
-    font-variant-numeric: tabular-nums;
-    text-align: right;
-    width: 1.2em;
-}
 
-div[class*="language-"].line-numbers-mode {
-    position: relative;
-
-    pre[class*="language-"] {
-        padding-left: calc(2.4em + 1.2rem);
-        margin-top: 0;
-        margin-bottom: 0;
+    .line-number {
+        user-select: none;
+        color: var(--icon-color);
+        display: inline-block;
+        font-variant-numeric: tabular-nums;
+        text-align: right;
+        width: 1.2em;
     }
 }

From fd27e89378636520526a7c7cc27e946b8a5a5f7e Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Sat, 17 Dec 2022 13:49:46 +0800
Subject: [PATCH 2/5] docs: fix ui for firefox

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

diff --git a/docs/src/assets/scss/syntax-highlighter.scss b/docs/src/assets/scss/syntax-highlighter.scss
index 90752c52917..2b729e5ea4e 100644
--- a/docs/src/assets/scss/syntax-highlighter.scss
+++ b/docs/src/assets/scss/syntax-highlighter.scss
@@ -114,6 +114,7 @@ pre[class*="language-"] {
     font-family: var(--mono-font), Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
     line-height: 1.5;
     color: var(--icon-color);
+    font-variant-ligatures: none;
 
     .line-number {
         user-select: none;

From 57124af1f2c6921b26dda21c958a3ab89f57f428 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Mon, 19 Dec 2022 08:53:35 +0800
Subject: [PATCH 3/5] docs: fix highlighter

---
 docs/src/_plugins/md-syntax-highlighter.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/src/_plugins/md-syntax-highlighter.js b/docs/src/_plugins/md-syntax-highlighter.js
index 6f49a37ce00..9ae0dcd26cc 100644
--- a/docs/src/_plugins/md-syntax-highlighter.js
+++ b/docs/src/_plugins/md-syntax-highlighter.js
@@ -32,7 +32,7 @@ const loadLanguages = require("prismjs/components/");
  * @param {MarkdownIt} md markdown-it
  * @param {string} str code
  * @param {string} lang code language
- * @returns
+ * @returns {string} highlighted result wrapped in pre
  */
 const highlighter = function (md, str, lang) {
     let result = "";
@@ -41,7 +41,9 @@ const highlighter = function (md, str, lang) {
             loadLanguages([lang]);
             result = Prism.highlight(str, Prism.languages[lang], lang);
         } catch (err) {
-            console.log(err);
+            console.log(lang, err);
+            // we still want to wrap the result later
+            result = md.utils.escapeHtml(str);
         }
     } else {
         result = md.utils.escapeHtml(str);

From 0e5c31ed39992434bc682ecf0555cebc671cd94a Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Wed, 28 Dec 2022 12:45:06 +0800
Subject: [PATCH 4/5] fix: do not escape text code

---
 templates/formatter-examples.md.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/formatter-examples.md.ejs b/templates/formatter-examples.md.ejs
index fb023798a67..8bd8bfb2b64 100644
--- a/templates/formatter-examples.md.ejs
+++ b/templates/formatter-examples.md.ejs
@@ -66,7 +66,7 @@ Example output:
 
 <% if (formatterName !== "html") { -%>
 ```text
-<%= formatterResults[formatterName].result %>
+<%- formatterResults[formatterName].result %>
 ```
 <% } else {-%>
 <iframe src="html-formatter-example.html" width="100%" height="460px"></iframe>

From 5747683598036735bed931ae0d8ac8bc7a0f8375 Mon Sep 17 00:00:00 2001
From: Sam Chen <chenxsan@gmail.com>
Date: Wed, 28 Dec 2022 21:10:14 +0800
Subject: [PATCH 5/5] Revert "fix: do not escape text code"

This reverts commit 0e5c31ed39992434bc682ecf0555cebc671cd94a.
---
 templates/formatter-examples.md.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/formatter-examples.md.ejs b/templates/formatter-examples.md.ejs
index 8bd8bfb2b64..fb023798a67 100644
--- a/templates/formatter-examples.md.ejs
+++ b/templates/formatter-examples.md.ejs
@@ -66,7 +66,7 @@ Example output:
 
 <% if (formatterName !== "html") { -%>
 ```text
-<%- formatterResults[formatterName].result %>
+<%= formatterResults[formatterName].result %>
 ```
 <% } else {-%>
 <iframe src="html-formatter-example.html" width="100%" height="460px"></iframe>