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

assets/styles/global.scss

@@ -104,9 +104,9 @@ input {
   }
 }
 
-
-
+@import "~assets/styles/highlightjs.scss";
 @import "~assets/styles/layout.scss";
 @import "~assets/styles/utils.scss";
 @import "~assets/styles/components.scss";
 @import "~assets/styles/normalize.scss";
+

assets/styles/highlightjs.scss

@@ -0,0 +1,95 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F0F0F0
+}
+
+.hljs,
+.hljs-subst {
+  color: #444
+}
+
+.hljs-comment {
+  color: #888888
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  color: #f58300;
+  font-weight: bold
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #06b800
+}
+
+.hljs-title,
+.hljs-section {
+  color: #008888;
+  font-weight: bold
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060
+}
+
+.hljs-literal {
+  color: #78A960
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #f58300
+}
+
+.hljs-meta {
+  color: #1f7199
+}
+
+.hljs-meta-string {
+  color: #4d99bf
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}
+
+pre {
+  background-color: #222222;
+  padding: 1em 1em 1em 1em;
+  border-width: 5px;
+  border-radius: 2em;
+  border-color: var(--color-brand);
+
+  code {
+    line-height: 100%;
+    padding: 0.2em;
+    letter-spacing: -0.05em;
+    word-break: normal;
+    font-family: monospace;
+  }
+}