From b8e6bcd3298e0a97736f889ae53f39fc84a4f1e6 Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Sun, 16 Oct 2022 12:34:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=AE=E9=A1=B6=E6=96=87=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/modules/libs/code-highlight.html | 85 +++++++++++++++-------
 1 file changed, 58 insertions(+), 27 deletions(-)
diff --git a/templates/modules/libs/code-highlight.html b/templates/modules/libs/code-highlight.html
index d5375ffa..b86cfb3e 100644
--- a/templates/modules/libs/code-highlight.html
+++ b/templates/modules/libs/code-highlight.html
@@ -1,41 +1,72 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <th:block th:fragment="import">
-    <link rel="stylesheet"
-          th:href="@{/assets/libs/highlight.js/styles/{theme}(theme=${theme.config.content.code_highlight_style})}"/>
-    <script th:src="@{/assets/libs/highlight.js/highlight.min.js}"></script>
+    <!--<link rel="stylesheet"-->
+    <!--      th:href="@{/assets/libs/highlight.js/styles/{theme}(theme=${theme.config.content.code_highlight_style})}"/>-->
+    <!--<script th:src="@{/assets/libs/highlight.js/highlight.min.js}"></script>-->
+    <script src="https://unpkg.com/shiki"></script>
 </th:block>
 
 <th:block th:fragment="script">
-    <script>
-        (async function () {
-            const extraLanguages = "[[${theme.config.content.code_highlight_extra_languages}]]".split(",").filter((x) => x);
+    <!--<script>-->
+    <!--    (async function () {-->
+    <!--        const extraLanguages = "[[${theme.config.content.code_highlight_extra_languages}]]".split(",").filter((x) => x);-->
 
-            for (let i = 0; i < extraLanguages.length; i++) {
-                const lang = extraLanguages[i];
-                if (lang) {
-                    await loadScript("[[${#theme.assets('/libs/highlight.js/languages')}]]/" + lang + ".min.js");
-                }
+    <!--        for (let i = 0; i < extraLanguages.length; i++) {-->
+    <!--            const lang = extraLanguages[i];-->
+    <!--            if (lang) {-->
+    <!--                await loadScript("[[${#theme.assets('/libs/highlight.js/languages')}]]/" + lang + ".min.js");-->
+    <!--            }-->
+    <!--        }-->
+
+    <!--        console.log("Extra languages: ", extraLanguages);-->
+
+    <!--        document.querySelectorAll("pre code").forEach((el) => {-->
+    <!--            hljs.highlightElement(el);-->
+    <!--        });-->
+    <!--        console.log("Loaded languages: ", hljs.listLanguages());-->
+    <!--    })();-->
+
+    <!--    function loadScript(url) {-->
+    <!--        return new Promise(function (resolve, reject) {-->
+    <!--            const script = document.createElement("script");-->
+    <!--            script.type = "text/javascript";-->
+    <!--            script.src = url;-->
+    <!--            script.onload = resolve;-->
+    <!--            script.onerror = reject;-->
+    <!--            document.head.appendChild(script);-->
+    <!--        });-->
+    <!--    }-->
+    <!--</script>-->
+
+    <script>
+
+        $("article pre>code").each(function () {
+
+            console.log(this.innerHTML)
+
+            // 去除空格以及多余标点
+            var codeId = $(this).text().replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\：|\，|\。]/g, '');
+            codeId = codeId.toLowerCase();
+            if (idArr[codeId]) {
+                // id已经存在
+                $(this).attr('id', codeId + '-' + idArr[codeId]);
+                idArr[codeId]++;
+            } else {
+                // id未存在
+                idArr[codeId] = 1;
+                $(this).attr('id', codeId);
             }
 
-            console.log("Extra languages: ", extraLanguages);
+            shiki.getHighlighter({
+                theme: 'nord'
+            }).then(highlighter => {
+                const code = highlighter.codeToHtml(`console.log('shiki');`, {lang: 'js'})
+                document.getElementById('codeId').innerHTML = code
+            })
+        })
 
-            document.querySelectorAll("pre code").forEach((el) => {
-                hljs.highlightElement(el);
-            });
-            console.log("Loaded languages: ", hljs.listLanguages());
-        })();
 
-        function loadScript(url) {
-            return new Promise(function (resolve, reject) {
-                const script = document.createElement("script");
-                script.type = "text/javascript";
-                script.src = url;
-                script.onload = resolve;
-                script.onerror = reject;
-                document.head.appendChild(script);
-            });
-        }
     </script>
 </th:block>
 </html>
\ No newline at end of file
