fix(site): rewrite the theme of code highlight (#3397)

* fix(site): rewrite the theme of code highlight

* fix(site): use xml of highlight to format the source code

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/main.js

@@ -27,6 +27,7 @@ import hljs from 'highlight.js/lib/core'
 import javascript from 'highlight.js/lib/languages/javascript'
 import css from 'highlight.js/lib/languages/css'
 import html from 'highlight.js/lib/languages/xml'
+import tsPath from 'highlight.js/lib/languages/typescript'
 import docsearch from '@docsearch/js'
 import '@docsearch/css'
 import { doSearchEverySite } from './tools/docsearch'
@@ -37,6 +38,7 @@ const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
 hljs.registerLanguage('javascript', javascript)
 hljs.registerLanguage('css', css)
 hljs.registerLanguage('html', html)
+hljs.registerLanguage('ts', tsPath)
 
 if (!location.href.includes('tiny-vue-plus')) {
   docsearch({

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

@@ -9,7 +9,6 @@
 import { defineComponent, ref, watch } from 'vue'
 import hljs from 'highlight.js/lib/core'
 import 'highlight.js/styles/github.css'
-import tsPath from 'highlight.js/lib/languages/typescript'
 
 export default defineComponent({
   name: 'AsyncHighlight',
@@ -18,29 +17,21 @@ export default defineComponent({
       type: String,
       default: ''
     },
-    types: {
+    filename: {
       type: String
     }
   },
   setup(props) {
     const highlightFinish = ref(false)
     const highlightCode = ref('')
 
-    const getFormatCodes = (types) => {
-      hljs.registerLanguage('ts', tsPath)
-      const textHtml = hljs.highlight(props.code, { language: types }).value
-
-      return textHtml
-    }
     watch(
       props,
       () => {
         setTimeout(() => {
           // highlight和其他同步任务叠加容易形成长任务，改成异步消除长任务。
-          if (props.types && props.types === 'html') {
-            highlightCode.value = props.code
-          } else if (props.types && props.types === 'ts') {
-            highlightCode.value = getFormatCodes(props.types)
+          if (props.filename && props.filename.endsWith('.vue')) {
+            highlightCode.value = hljs.highlight(props.code, { language: 'html' }).value
           } else {
             highlightCode.value = hljs.highlightAuto(props.code).value
           }
@@ -58,13 +49,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;

examples/sites/src/views/components-doc/components/demo.vue

@@ -29,7 +29,7 @@
             />
 
             <i
-              v-if="!isPlus" 
+              v-if="!isPlus"
               v-auto-tip="{ content: i18nByKey('playground'), effect: 'light', always: true }"
               class="i-ti-playground ml8 ti-w16 ti-h16 ti-cur-hand"
               @click="openPlayground(demo)"
@@ -57,12 +57,12 @@
         <template v-if="files?.length">
           <tiny-tabs v-model="state.tabValue" class="code-tabs">
             <tiny-tab-item v-for="(file, idx) in files" :key="file.fileName" :name="'tab' + idx" :title="file.fileName">
-              <async-highlight :code="file.code"></async-highlight>
+              <async-highlight :code="file.code" :filename="file.fileName"></async-highlight>
             </tiny-tab-item>
           </tiny-tabs>
         </template>
         <div v-else-if="files[0]">
-          <async-highlight :code="files[0].code"></async-highlight>
+          <async-highlight :code="files[0].code" :filename="files[0].fileName"></async-highlight>
         </div>
       </div>
     </div>