Template Codeblock with example for index.vue (#29)

* Replace runkit GIF with actual code on index.vue

Sometimes the GIF will not load due to a slow or crappy connection.
Syntax highlighting could be added at a later date.

* Added syntax highlighting with vue highlightJS

* Move scss to highlightjs.scss

* Introduce better syntax highlighting.

* Changed to monospace font

plugins/vue-syntax.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import hljs from 'highlight.js'
+
+Vue.directive('highlightjs', {
+  deep: true,
+  bind(el, binding) {
+    // on first bind, highlight all targets
+    const targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      // if a value is directly assigned to the directive, use this
+      // instead of the element content.
+      if (binding.value) {
+        target.textContent = binding.value
+      }
+      hljs.highlightBlock(target)
+    })
+  },
+  componentUpdated(el, binding) {
+    // after an update, re-fill the content and then highlight
+    const targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      if (binding.value) {
+        target.textContent = binding.value
+        hljs.highlightBlock(target)
+      }
+    })
+  },
+})