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;
+  }
+}

nuxt.config.js

@@ -93,7 +93,11 @@ export default {
    ** Plugins to load before mounting the App
    ** https://nuxtjs.org/guide/plugins
    */
-  plugins: ['~/plugins/vue-tooltip.js', '~/plugins/vue-notification.js'],
+  plugins: [
+    '~/plugins/vue-tooltip.js',
+    '~/plugins/vue-notification.js',
+    '~/plugins/vue-syntax.js',
+  ],
   /*
    ** Auto import components
    ** See https://nuxtjs.org/api/configuration-components

package-lock.json

@@ -3397,6 +3397,15 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -6252,6 +6261,12 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -6965,6 +6980,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "highlight.js": {
+      "version": "10.3.2",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.3.2.tgz",
+      "integrity": "sha512-3jRT7OUYsVsKvukNKZCtnvRcFyCJqSEIuIMsEybAXRiFSwpt65qjPd/Pr+UOdYt7WJlt+lj3+ypUsHiySBp/Jw=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -12788,6 +12808,14 @@
         }
       }
     },
+    "vue-highlightjs": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz",
+      "integrity": "sha1-KaDVcTL8HOFc+mHolpGPW3GMXVI=",
+      "requires": {
+        "highlight.js": "*"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -13011,7 +13039,6 @@
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
           "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "optional": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -13029,7 +13056,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -13060,7 +13086,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "optional": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -13072,7 +13097,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -13085,6 +13109,7 @@
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
@@ -13122,7 +13147,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -13131,7 +13155,6 @@
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
               "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "optional": true,
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -13142,7 +13165,6 @@
           "version": "3.1.10",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
           "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "optional": true,
           "requires": {
             "arr-diff": "^4.0.0",
             "array-unique": "^0.3.2",
@@ -13188,8 +13210,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-          "optional": true
         },
         "string_decoder": {
           "version": "1.1.1",
@@ -13204,7 +13225,6 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
           "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-          "optional": true,
           "requires": {
             "is-number": "^3.0.0",
             "repeat-string": "^1.6.1"

package.json

@@ -17,9 +17,11 @@
     "@nuxtjs/dayjs": "^1.2.0",
     "@nuxtjs/robots": "^2.4.2",
     "@nuxtjs/sitemap": "^2.4.0",
+    "highlight.js": "^10.3.2",
     "marked": "^1.2.0",
     "nuxt": "^2.14.7",
     "v-tooltip": "^2.0.3",
+    "vue-highlightjs": "^1.3.3",
     "vue-multiselect": "^2.1.6",
     "vue-notification": "^1.3.20",
     "xss": "^1.0.8"

pages/index.vue

@@ -147,7 +147,16 @@
         </p>
       </div>
       <div class="right hero-image">
-        <img src="~/assets/images/api.gif" alt="api" loading="lazy" />
+        <pre v-highlightjs>
+<code class="javascript">const fetch = require('node-fetch');
+fetch('https://api.modrinth.com/api/v1/mod').then(res => res.json()).then(data => {
+    console.log(data);
+    // hits: [Object {author: "mezz", author_url: "https://www.curseforge.com/members/17072262-mezz?username=mezz", …}, …]
+    // limit: 10
+    // offset: 0
+    /// total_hits: 19440
+});</code>
+        </pre>
       </div>
     </div>
   </div>
@@ -283,6 +292,7 @@ export default {
     right: 0;
     z-index: -1;
     -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
   }
 
   &:before {

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)
+      }
+    })
+  },
+})