fix(site): rewrite the theme of code highlight

Author: shenjunjian

examples/sites/src/assets/custom-markdown.css

@@ -97,6 +97,8 @@ body .markdown-body {
 }
 .markdown-body code {
   text-shadow: none !important;
+  font-size: 120%;
+  font-family: Consolas, 'Courier New', monospace !important;
 }
 
 html.dark.dark .markdown-body {
@@ -115,6 +117,63 @@ html.dark.dark .markdown-body code .token.operator {
   background-color: transparent;
 }
 
-html.dark.dark .markdown-body code .hljs-string {
-  color: #6f42c1;
+/* 指南中的代码块高亮  */
+html.dark.dark .markdown-body code {
+  &.language-bash {
+    color: #9ecbff;
+    .function {
+      color: #b392f0;
+    }
+  }
+
+  &.language-js,
+  &.language-javascript {
+    color: #e1e4e8;
+    .punctuation {
+      color: #e1e4e8;
+    }
+    .keyword {
+      color: #f97583;
+    }
+    .string {
+      color: #9ecbff;
+    }
+    .function {
+      color: #b392f0;
+    }
+    .literal-property,
+    .property {
+      color: #b392f0;
+    }
+    .operator {
+      color: #e1e4e8;
+    }
+    .constant {
+      color: #e1e4e8;
+    }
+  }
+
+  &.language-html {
+    color: #e1e4e8;
+    .tag {
+      color: #85e89d;
+    }
+    .punctuation {
+      color: #e1e4e8;
+    }
+    .attr-name {
+      color: #f97583;
+    }
+    .attr-value {
+      color: #9ecbff;
+    }
+    .literal-property,
+    .string-property,
+    .property {
+      color: #b392f0;
+    }
+    .string {
+      color: #9ecbff;
+    }
+  }
 }

examples/sites/src/views/components-doc/components/async-highlight.vue

@@ -58,13 +58,59 @@ export default defineComponent({
 </script>
 
 <style lang="less">
+/* 代码预览中的代码块高亮  */
+.dark {
+  .code-preview-box {
+    .hljs-tag {
+      color: #e1e4e8;
+      .hljs-name {
+        color: #85e89d;
+      }
+      .hljs-attr {
+        color: #b392f0;
+      }
+      .hljs-string {
+        color: #9ecbff;
+      }
+    }
+
+    .language-javascript {
+      color: #79b8ff;
+
+      .hljs-keyword,
+      .hljs-title {
+        color: #f97583;
+      }
+      .hljs-string {
+        color: #9ecbff;
+      }
+      .hljs-attr {
+        color: #e1e4e8;
+      }
+      .hljs-variable {
+        color: #b392f0;
+      }
+    }
+    .language-css {
+      .hljs-selector-class {
+        color: #b392f0;
+      }
+      .hljs-attribute {
+        color: #9ecbff;
+      }
+      .hljs-number {
+        color: #e1e4e8;
+      }
+    }
+  }
+}
 .code-preview-box {
   max-height: 400px;
   overflow-y: auto;
 
   pre {
     line-height: 22px;
-    font-family: monospace;
+    font-family: Consolas, 'Courier New', monospace !important;
     font-size: 14px;
     font-weight: 400;
     padding: 0px 12px;