代码块优化，

目前还有，默认没有语言不渲染问题

settings.yaml

@@ -1795,6 +1795,24 @@ spec:
               value: true
             - label: 禁用
               value: false
+        - $formkit: radio
+          name: enable_height_limit
+          id: enable_height_limit
+          key: enable_height_limit
+          if: $get(enable).value
+          label: 启用代码高度限制
+          help: 启用代码高度限制功能
+          value: false
+          options:
+            - label: 启用
+              value: true
+            - label: 禁用
+              value: false
+        - $formkit: number
+          name: height_limit
+          if: $get(enable_height_limit).value
+          value: 300
+          label: 代码高度限制
         - $formkit: select
           name: theme_light
           if: $get(enable).value

templates/assets/js/halo.js

@@ -45,6 +45,7 @@ let halo = {
         const isEnableCopy = GLOBAL_CONFIG.prism.enable_copy;
         const isEnableExpander = GLOBAL_CONFIG.prism.enable_expander;
         const prismLimit = GLOBAL_CONFIG.prism.prism_limit;
+        const isEnableHeightLimit = GLOBAL_CONFIG.prism.enable_height_limit;
 
         // https://stackoverflow.com/a/30810322/7595472
 
@@ -181,20 +182,62 @@ let halo = {
             }
 
 
+
+            const prismToolsFn = function (e) {
+                const $target = e.target.classList;
+                if ($target.contains("code-expander")) prismShrinkFn(this);
+            };
+
             //折叠
             if(isEnableExpander){
                 var expander = document.createElement("i");
                 expander.className = 'fa-sharp fa-solid fa-caret-down code-expander cursor-pointer'
                 customItem.appendChild(expander)
 
+                expander.addEventListener('click', prismToolsFn)
 
-                const expanderCode = function () {
-                    r.firstElementChild.classList.toggle('c-toggle')
-                    toolbar.classList.toggle('c-expander')
+
+
+            }
+
+
+            const expandCode = function () {
+                this.classList.toggle("expand-done");
+                this.style.display = "none";
+                r.classList.toggle("expand-done");
+            };
+
+            if (isEnableHeightLimit && r.offsetHeight > prismLimit) {
+
+                r.classList.add("close")
+                const ele = document.createElement("div");
+                ele.className = "code-expand-btn";
+                ele.innerHTML = '<i class="haofont hao-icon-angle-double-down"></i>';
+                ele.addEventListener("click", expandCode);
+                r.offsetParent.appendChild(ele);
+            }
+
+
+
+
+            const prismShrinkFn = ele => {
+                const $nextEle = r.offsetParent.lastElementChild.classList
+                toolbar.classList.toggle('c-expander')
+                r.classList.toggle("expand-done-expander");
+                if (toolbar.classList.contains('c-expander')) {
+                    r.firstElementChild.style.display = "none";
+                    if($nextEle.contains('code-expand-btn')){
+                        r.offsetParent.lastElementChild.style.display = "none";
+                    }
+                } else {
+                    r.firstElementChild.style.display = "block";
+                    if($nextEle.contains('code-expand-btn') &&  !r.classList.contains('expand-done')){
+                        r.offsetParent.lastElementChild.style.display = "block";
+                    }
                 }
 
-                expander.addEventListener('click', expanderCode)
-            }
+            };
+
 
             toolbar.appendChild(customItem)
 

templates/assets/libs/prism/code.css

@@ -145,4 +145,143 @@
 #article-container .code-toolbar pre[class*=language-] code[class*=language-].c-toggle{
     display: none;
 }
+
+/* 代码展开图标 */
+#article-container .code-expand-btn {
+    transition: 0.3s;
+    backdrop-filter: saturate(180%) blur(500px);
+    -webkit-backdrop-filter: blur(20px);
+    transform: translateZ(0);
+    position: absolute;
+    bottom: 0px;
+    z-index: 10;
+    width: 100%;
+    text-align: center;
+    font-size: var(--global-font-size);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+}
+
+#article-container .code-expand-btn:hover i {
+    color: var(--heo-white);
+}
+
+#article-container .code-expand-btn i {
+    color: var(--hlnumber-color);
+    font-size: 14px;
+    line-height: 1;
+}
+
+
+#article-container .code-expand-btn.expand-done {
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+#article-container pre{
+    border:0px;
+}
+
+#article-container .code-expand-btn:hover {
+    background: var(--heo-main);
+}
+
+#article-container .code-expand-btn:hover i {
+    color: var(--heo-white);
+}
+
+#article-container .code-toolbar pre.close.expand-done{
+    height: 100%;
+}
+#article-container .code-toolbar pre.close.expand-done-expander{
+    height: 100%;
+}
+
+
+@-moz-keyframes code-expand-key {
+    0% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+
+    50% {
+        opacity: .1;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+        filter: alpha(opacity=10)
+    }
+
+    100% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+}
+
+@-webkit-keyframes code-expand-key {
+    0% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+
+    50% {
+        opacity: .1;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+        filter: alpha(opacity=10)
+    }
+
+    100% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+}
+
+@-o-keyframes code-expand-key {
+    0% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+
+    50% {
+        opacity: .1;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+        filter: alpha(opacity=10)
+    }
+
+    100% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+}
+
+@keyframes code-expand-key {
+    0% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+
+    50% {
+        opacity: .1;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+        filter: alpha(opacity=10)
+    }
+
+    100% {
+        opacity: .6;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        filter: alpha(opacity=60)
+    }
+}
+
 /*代码块*/

templates/assets/zhheo/zhheoblog.css

@@ -12075,26 +12075,26 @@ blockquote p {
 /*}*/
 
 /* 代码展开图标 */
-#article-container .code-expand-btn i {
-    color: var(--heo-fontcolor);
-    font-size: 1rem;
-}
+/*#article-container .code-expand-btn i {*/
+/*    color: var(--heo-fontcolor);*/
+/*    font-size: 1rem;*/
+/*}*/
 
-#article-container .code-expand-btn {
-    background-color: var(--heo-mask);
-    background: var(--heo-secondbg);
-    transition: 0.3s;
-    backdrop-filter: saturate(180%) blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-}
+/*#article-container .code-expand-btn {*/
+/*    background-color: var(--heo-mask);*/
+/*    background: var(--heo-secondbg);*/
+/*    transition: 0.3s;*/
+/*    backdrop-filter: saturate(180%) blur(20px);*/
+/*    -webkit-backdrop-filter: blur(20px);*/
+/*}*/
 
-#article-container .code-expand-btn:hover {
-    background: var(--heo-main);
-}
+/*#article-container .code-expand-btn:hover {*/
+/*    background: var(--heo-main);*/
+/*}*/
 
-#article-container .code-expand-btn:hover i {
-    color: var(--heo-white);
-}
+/*#article-container .code-expand-btn:hover i {*/
+/*    color: var(--heo-white);*/
+/*}*/
 
 /* 结尾寄语 */
 #readmore-talk {

templates/macro/prism-code.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="prism-code">
+    <th:block th:if="${theme.config.code.enable}">
+        <link rel="preload" as="style" onload="this.rel='stylesheet'"
+              th:href="${assets_link+'/libs/prism/prism.min.css'}">
+        <link rel="preload" as="style" onload="this.rel='stylesheet'"
+              th:href="${assets_link+'/libs/prism/code.css'}">
+        <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="light"
+              th:href="${assets_link+ '/libs/prism/themes/prism-'+theme.config.code.theme_light+'.css'}">
+        <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="dark"
+              th:href="${assets_link+'/libs/prism/themes/prism-'+theme.config.code.theme_dark+'.css'}">
+        <script data-pjax type="text/javascript" th:src="${assets_link+'/libs/prism/prism.min.js'}"></script>
+
+        <style>
+
+            #article-container .code-toolbar pre.close{
+                overflow: hidden;
+                height: [[${theme.config.code.height_limit}]]px;
+            }
+        </style>
+
+    </th:block>
+</th:block>
+</html>

templates/modules/head.html

@@ -42,20 +42,8 @@
     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.0/css/all.min.css" media="all" onload="this.media='all'">
 
 
-
-   <!-- 代码块-->
-    <th:block th:if="${theme.config.code.enable}">
-        <link rel="preload" as="style" onload="this.rel='stylesheet'"
-              th:href="${assets_link+'/libs/prism/prism.min.css'}">
-        <link rel="preload" as="style" onload="this.rel='stylesheet'"
-              th:href="${assets_link+'/libs/prism/code.css'}">
-        <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="light"
-              th:href="${assets_link+ '/libs/prism/themes/prism-'+theme.config.code.theme_light+'.css'}">
-        <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="dark"
-              th:href="${assets_link+'/libs/prism/themes/prism-'+theme.config.code.theme_dark+'.css'}">
-        <script data-pjax type="text/javascript" th:src="${assets_link+'/libs/prism/prism.min.js'}"></script>
-
-    </th:block>
+   <!--  代码块-->
+    <th:block th:replace="~{macro/prism-code :: prism-code}"/>
 
     <script th:if="${theme.config.footer.footerContent.footerStyle == 'one'}" async="async">(function () {
         var grt = new Date("[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[1]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[2]}]]/[[${#strings.arraySplit(theme.config.basics.siteStartTime, '-')[0]}]] 00:00:00"); //设置网站上线时间
@@ -304,7 +292,8 @@
                 enable_line: [[${ theme.config.code.enable_line }]],
                 enable_copy: [[${ theme.config.code.enable_copy }]],
                 enable_expander: [[${ theme.config.code.enable_expander }]],
-                prism_limit: 330,
+                prism_limit: Number([[${#strings.isEmpty(theme.config.code.height_limit) ? 300 : theme.config.code.height_limit}]])+30,
+                enable_height_limit: [[${theme.config.code.enable_height_limit}]]
             },
 
         };