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

Author: shenjunjian

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
           }

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>