Merge branch 'hotfix/fix-585'

Author: wenzhixin

vue-examples/package.json

@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "core-js": "^3.30.2",
+    "highlight.js": "^11.8.0",
     "jquery": "^3.7.0",
     "multiple-select": "^1.6.0",
-    "vue": "^2.6.10",
-    "vue-highlight.js": "^3.1.0",
-    "vue-router": "^3.0.6",
-    "vuex": "^3.0.1"
+    "vue": "^2.7.14",
+    "vue-router": "^3.6.5",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.4",

vue-examples/src/main.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
 import './plugins/select'
-import './plugins/highlight'
 import router from './router'
 
 Vue.config.productionTip = false

vue-examples/src/plugins/highlight.js

@@ -25,17 +25,15 @@
       <div v-if="!isSource">
         <component :is="componentLoader" />
       </div>
-      <highlight-code
-        v-else
-        lang="vue"
-      >
-        {{ componentSource }}
-      </highlight-code>
+      <pre v-else><code class="html">{{ componentSource }}</code></pre>
     </div>
   </div>
 </template>
 
 <script>
+import hljs from 'highlight.js/lib/core'
+import xml from 'highlight.js/lib/languages/xml'
+import 'highlight.js/styles/default.css'
 import registry from '@/registry'
 import Ads from '@/components/Ads'
 import MS from '@/assets/MS'
@@ -87,14 +85,26 @@ export default {
     },
     isSource () {
       this.updateAds()
+      this.updateHighlight()
     }
   },
+  mounted () {
+    hljs.registerLanguage('xml', xml)
+    this.updateHighlight()
+  },
   methods: {
     updateAds () {
       this.hideAds = true
       setTimeout(() => {
         this.hideAds = false
       }, 500)
+    },
+    updateHighlight () {
+      this.$nextTick(() => {
+        document.querySelectorAll('pre code').forEach(el => {
+          hljs.highlightElement(el)
+        })
+      })
     }
   }
 }