abstract some component

src/auxiliary/highlightCode/index.vue

@@ -0,0 +1,52 @@
+<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/auxiliary/index.js

@@ -0,0 +1,8 @@
+import highlightCode from './highlightCode'
+
+import sideNav from './sideNav'
+
+export default function (Vue) {
+  Vue.component('highlightCode', highlightCode)
+  Vue.component('sideNav', sideNav)
+}

src/auxiliary/sideNav/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="side-nav">
+    <div class="item" v-for="navItem in nav" :key="navItem.title">
+      <a :href="`#${navItem.target}`">{{ navItem.title }}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SideNav',
+  props: ['nav']
+}
+</script>
+
+<style lang="less">
+.side-nav {
+  position: fixed;
+  width: 150px;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  .item {
+    font-weight: bold;
+    color: #fff;
+    height: 30px;
+    line-height: 30px;
+    font-size: 18px;
+
+    a {
+      color: #fff;
+
+      &:hover,
+      &:active,
+      &:visited {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>