fixed 编辑器实现代码高亮

hugo.toml

@@ -15,7 +15,8 @@ HasCJKLanguage = true
 #hugo代码高亮显示
 [markup]
   [markup.highlight]
-    style = 'tango'
+    style = 'dracula'
+    noClasses = true
 
 # 自定义文章固定链接：使用 slug 作为文件名（如 /20260117.html）
 [permalinks]

themes/Ying/layouts/partials/head.html

@@ -22,12 +22,12 @@
     })();
   </script>
   <!-- Stylesheets -->
-  <link rel='stylesheet' href='/css/main.css'>
   <link rel="stylesheet" href="/css/normalize.css">
   <link rel="stylesheet" href="/css/remixicon.css">
   <link rel="stylesheet" href="/css/uikit.min.css">
   <link rel="stylesheet" href="/css/nprogress.min.css">
   <link rel="stylesheet" href="/css/Artalk.css">
+  <link rel='stylesheet' href='/css/main.css'>
   <style>
     @media only screen and (max-width: 768px) {
       .items {

themes/Ying/static/css/main.css

@@ -169,35 +169,27 @@ a img {
 
 pre,
 code {
-    font-size: 15px;
-    border: 1px solid #e8e8e8;
-    border-radius: 3px;
-    background-color: #3a3a3a;
-    color: #EEEEEE
-}
-
-pre,
-code {
-    font-size: 15px;
-    border: 1px solid #e8e8e8;
-    border-radius: 3px;
-    background-color: #3a3a3a;
-    color: #EEEEEE
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    border-radius: 4px;
+    background-color: #282a36; /* Dracula BG */
+    color: #f8f8f2; /* Dracula FG */
 }
 
 code {
-    padding: 1px 5px
+    padding: 2px 6px;
 }
 
 pre {
-    padding: 8px 12px;
-    overflow-x: scroll
+    padding: 10px;
+    overflow-x: auto;
 }
 
 pre>code {
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
     border: 0;
-    padding-right: 0;
-    padding-left: 0
 }
 
 table {
@@ -538,51 +530,99 @@ ul {
     transition: color 0.35s ease, border-color 0.35s ease;
 }
 
+/* 代码高亮 Mac 风格样式 */
 .highlight {
-    /* background: #3a3a3a;
-    border: 3px solid #e8e8e8; */
+    background: #f6f8fa; /* Day Mode: Light BG */
+    color: #24292e;      /* Day Mode: Dark Text */
+    border-radius: 10px;
+    border: 1px solid #d0d7de; /* Day Mode Border */
+    box-shadow: none; /* Remove Shadow */
+    margin: 20px 0;
+    overflow: hidden;
+    position: relative;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+[data-theme="dark"] .highlight {
+    background: #282a36; /* Night Mode: Dark BG */
+    color: #f8f8f2;      /* Night Mode: Light Text */
+    border: 1px solid #44475a; /* Night Mode Border */
+    box-shadow: none; /* Remove Shadow */
+}
+
+.highlight::before {
+    content: " ";
+    display: block;
+    height: 12px;
+    width: 12px;
+    margin: 15px;
+    background: #ff5f56;
+    border-radius: 50%;
+    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
 }
 
 .highlight pre,
 .highlight code,
 .highlight kbd,
 .highlight samp {
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    line-height: 1.6;
     font-weight: normal;
-    background-color: inherit;
     white-space: pre;
-    color: #EEEEEE;
 }
 
 .highlight pre {
-    margin-bottom: 0;
-    margin-top: 0;
-    padding: 10px;
+    margin: 0;
+    padding: 45px 15px 15px; /* Top padding for Mac dots */
     overflow: auto;
+    background-color: transparent !important; /* Override inline style */
+    border: none !important; /* Remove conflicting border */
+    border-radius: 0 !important; /* Reset border radius inside container */
+    /* Day Mode: Invert Dracula colors to make them readable on light background */
+    filter: invert(1) hue-rotate(180deg);
+}
+
+[data-theme="dark"] .highlight pre {
+    /* Night Mode: Dracula colors are native for dark background */
+    filter: none;
 }
 
 .highlight pre code {
     padding: 0;
+    background-color: transparent !important;
+    color: inherit;
 }
 
+/* 滚动条样式 */
 .highlight pre::-webkit-scrollbar {
-    height: 10px;
-}
-
-.highlight pre::-webkit-scrollbar-button {
-    display: none;
+    height: 8px;
+    width: 8px;
 }
 
 .highlight pre::-webkit-scrollbar-thumb {
-    min-height: 16px;
-    background-color: #cccccc;
-    background-clip: padding-box;
-    border: 3px solid #fdfdfd;
-    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.2); /* Day Mode: Dark scrollbar */
+    border-radius: 4px;
 }
 
-.highlight pre::-webkit-scrollbar-thumb:active {
-    background-color: #999999;
-    border-width: 2px;
+[data-theme="dark"] .highlight pre::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2); /* Night Mode: Light scrollbar */
+}
+
+.highlight pre::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .highlight pre::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.highlight pre::-webkit-scrollbar-track {
+    background: transparent;
 }
 
 @media (max-width: 767px) {
@@ -625,6 +665,42 @@ ul {
     .highlight pre::-webkit-scrollbar {
         display: none;
     }
+}
+
+/* 代码复制按钮 */
+.copy-code-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.05);
+    border: none;
+    border-radius: 4px;
+    color: #555;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s;
+    opacity: 0;
+    z-index: 10;
+}
+
+[data-theme="dark"] .copy-code-btn {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f8f2;
+}
+
+.highlight:hover .copy-code-btn {
+    opacity: 1;
+}
+
+.copy-code-btn:hover {
+    background: rgba(0, 0, 0, 0.1);
+    transform: scale(1.1);
+}
+
+[data-theme="dark"] .copy-code-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
 
     .comment-form-author {
         width: 45% !important;

themes/Ying/static/js/main.js

@@ -215,3 +215,34 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 });
+
+// 代码复制功能
+function initCodeCopy() {
+  var codeBlocks = document.querySelectorAll('.highlight');
+  codeBlocks.forEach(function(block) {
+    if (block.querySelector('.copy-code-btn')) return;
+
+    var btn = document.createElement('button');
+    btn.className = 'copy-code-btn';
+    btn.innerHTML = '<i class="ri-file-copy-line"></i>';
+    block.appendChild(btn);
+
+    btn.addEventListener('click', function() {
+      var code = block.querySelector('code').innerText;
+      navigator.clipboard.writeText(code).then(function() {
+        btn.innerHTML = '<i class="ri-check-line"></i>';
+        setTimeout(function() {
+          btn.innerHTML = '<i class="ri-file-copy-line"></i>';
+        }, 2000);
+      }).catch(function(err) {
+        console.error('Failed to copy: ', err);
+        btn.innerText = 'Error';
+      });
+    });
+  });
+}
+
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+  initCodeCopy();
+});

themes/Ying/static/js/mypjax.js

@@ -173,6 +173,8 @@ document.addEventListener("pjax:complete", function () {
     NProgress.done();
     // 重载一些js样式调整
     pjax_reload()
+    // 初始化代码复制
+    initCodeCopy()
     //  激活返回顶部插件
     $(function () {
         $.scrollUp({