fixed 编辑器实现代码高亮

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;