feat: 添加内置代码高亮功能控制选项

Author: AR-26710

settings.yaml

@@ -527,14 +527,30 @@ spec:
               label: 打赏二维码
               validation: "required"
         - $formkit: checkbox
+          name: highlight_open
+          id: highlight_open
+          key: highlight_open
+          label: 内置代码块高亮
+          value: true
+          help: 默认使用内置代码块高亮，如果你需要使用代码块高亮插件，请关闭此选项以避免冲突
+        - $formkit: checkbox
+          if: "$get(highlight_open).value == true"
           name: code_line
+          id: code_line
+          key: code_line
           label: 代码块增加行号
           value: true
         - $formkit: checkbox
+          if: "$get(highlight_open).value == true"
+          id: code_line
+          key: code_line
           name: code_change_line
           label: 代码块自动换行
           value: false
         - $formkit: select
+          if: "$get(highlight_open).value == true"
+          id: code_pretty
+          key: code_pretty
           name: code_pretty
           label: 文章代码高亮主题
           value: Dracula

src/module/utils.ts

@@ -175,6 +175,12 @@ export class Utils {
    */
   @documentFunction()
   public registerHighlight() {
+    // 检查是否启用了代码高亮功能
+    // @ts-ignore
+    if (typeof window.highlight_open !== "undefined" && !window.highlight_open) {
+      return;
+    }
+
     const preElements = document.querySelectorAll("pre") as NodeListOf<HTMLElement>;
     preElements.forEach((preElement) => {
       preElement.classList.add("highlight-wrap");
@@ -229,6 +235,12 @@ export class Utils {
    */
   @documentFunction()
   public registerCopyCode() {
+    // 检查是否启用了代码高亮功能
+    // @ts-ignore
+    if (typeof window.highlight_open !== "undefined" && !window.highlight_open) {
+      return;
+    }
+
     const codeElements = document.querySelectorAll("pre code");
     codeElements.forEach((codeElement) => {
       const copyElement = document.createElement("span");

templates/assets/dist/main-2.4.3.min.js

@@ -10,9 +10,15 @@
 
   <!--/* 字体 */-->
   <th:block th:replace="~{module/head/fonts}" />
-  
+
+  <!--/* 内置代码高亮功能控制 */-->
+  <script th:inline="javascript">
+    window.highlight_open = /*[[${theme.config.post.highlight_open}]]*/ [];
+  </script>
+
   <!--/* 高亮代码样式 */-->
   <link
+    th:if="${theme.config.post.highlight_open}"
     rel="stylesheet"
     th:href="@{/assets/dist/css/highlight-{code_pretty}-{version}.min.css(code_pretty=${theme.config.post.code_pretty},version=${theme.spec.version})}"
     type="text/css"