From a7793859c9ecc94e6dd42b3db02d63309997d2fe Mon Sep 17 00:00:00 2001
From: jiaming <743192023@qq.com>
Date: Thu, 13 Dec 2018 18:48:39 +0800
Subject: [PATCH] add highlight code component to show demo code

---
 src/components/highlightCode/index.vue | 45 ++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/highlightCode/index.vue

diff --git a/src/components/highlightCode/index.vue b/src/components/highlightCode/index.vue
new file mode 100644
index 0000000..a8338f8
--- /dev/null
+++ b/src/components/highlightCode/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <pre><code class="highlight-code" :ref="ref">
+<slot></slot>
+  </code></pre>
+</template>
+
+<script>
+import 'highlight.js/styles/monokai-sublime.css'
+
+import highlight from 'highlight.js/lib/highlight'
+
+import javascript from 'highlight.js/lib/languages/javascript'
+
+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 {
+  font-family: 'code';
+  background-color: transparent;
+}
+</style>