abstract some component

src/components/highlightCode/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="highlight-code">
-    <pre><code :ref="ref">
-<slot></slot>
-    </code></pre>
-  </div>
-</template>
-
-<script>
-import 'highlight.js/styles/monokai-sublime.css'
-
-import highlight from 'highlight.js/lib/highlight'
-
-import xml from 'highlight.js/lib/languages/xml'
-import javascript from 'highlight.js/lib/languages/javascript'
-
-highlight.registerLanguage('xml', xml)
-highlight.registerLanguage('javascript', javascript)
-
-export default {
-  name: 'HighlightCode',
-  data () {
-    return {
-      ref: `highlight-code-${(new Date()).getTime()}`
-    }
-  },
-  methods: {
-    init () {
-      const { ref, $refs } = this
-
-      const codeChunk = $refs[ref]
-
-      highlight.highlightBlock(codeChunk)
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less">
-.highlight-code {
-
-  code {
-    font-family: 'code';
-    background-color: transparent;
-  }
-}
-</style>

src/components/index.js

@@ -22,10 +22,9 @@ import radarChart from './radarChart/index.vue'
 
 import numberShow from './numberShow/index.vue'
 import percentPond from './percentPond/index.vue'
+import waterLevelPond from './waterLevelPond/index.vue'
 import scrollBoard from './scrollBoard/index.vue'
 
-import highlightCode from './highlightCode'
-
 export default function (Vue) {
   Vue.component('borderBox1', borderBox1)
   Vue.component('borderBox2', borderBox2)
@@ -51,7 +50,6 @@ export default function (Vue) {
 
   Vue.component('numberShow', numberShow)
   Vue.component('percentPond', percentPond)
+  Vue.component('waterLevelPond', waterLevelPond)
   Vue.component('scrollBoard', scrollBoard)
-
-  Vue.component('highlightCode', highlightCode)
 }