feat: code highlighting client-side

client/themes/default/components/app.vue

@@ -49,7 +49,7 @@
               .headline.grey--text.text--darken-3 {{title}}
               .caption.grey--text.text--darken-1 {{description}}
           v-divider
-          .contents
+          .contents(ref='container')
             slot(name='contents')
 
         v-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
@@ -111,6 +111,7 @@
 
 <script>
 import { StatusIndicator } from 'vue-status-indicator'
+import Prism from '@/libs/prism/prism.js'
 
 export default {
   components: {
@@ -206,6 +207,9 @@ export default {
       }
     }
   },
+  mounted () {
+    Prism.highlightAllUnder(this.$refs.container)
+  },
   methods: {
     toggleNavigation () {
       this.navOpen = !this.navOpen

client/themes/default/scss/app.scss

@@ -77,75 +77,25 @@
     }
   }
 
-  .hljs{
-    display: block;
-    overflow-x: auto;
-    padding: 1rem;
-    background: #232323;
-    color: #e6e1dc;
+  .prismjs{
+    border: none;
+    border-radius: 5px;
+    box-shadow: initial;
+    background-color: mc('grey', '900');
+    padding: 1rem 1rem 1rem 3rem;
     margin: 1rem 24px;
-    border-radius: .5rem;
-  }
-  .hljs-comment,.hljs-quote{
-      color:#bc9458;
-      font-style:italic
-  }
-  .hljs-keyword,.hljs-selector-tag{
-      color:#c26230
-  }
-  .hljs-string,.hljs-number,.hljs-regexp,.hljs-variable,.hljs-template-variable{
-      color:#a5c261
-  }
-  .hljs-subst{
-      color:#519f50
-  }
-  .hljs-tag,.hljs-name{
-      color:#e8bf6a
-  }
-  .hljs-type{
-      color:#da4939
-  }
-  .hljs-symbol,.hljs-bullet,.hljs-built_in,.hljs-builtin-name,.hljs-attr,.hljs-link{
-      color:#6d9cbe
-  }
-  .hljs-params{
-      color:#d0d0ff
-  }
-  .hljs-attribute{
-      color:#cda869
-  }
-  .hljs-meta{
-      color:#9b859d
-  }
-  .hljs-title,.hljs-section{
-      color:#ffc66d
-  }
-  .hljs-addition{
-      background-color:#144212;
-      color:#e6e1dc;
-      display:inline-block;
-      width:100%
-  }
-  .hljs-deletion{
-      background-color:#600;
-      color:#e6e1dc;
-      display:inline-block;
-      width:100%
-  }
-  .hljs-selector-class{
-      color:#9b703f
-  }
-  .hljs-selector-id{
-      color:#8b98ab
-  }
-  .hljs-emphasis{
-      font-style:italic
-  }
-  .hljs-strong{
-      font-weight:bold
-  }
-  .hljs-link{
-      text-decoration:underline
+
+    > code {
+      box-shadow: initial;
+      display: block;
+      font-size: .85rem;
+      font-family: 'Source Code Pro', monospace;
+
+      &:after, &:before {
+        content: initial;
+        letter-spacing: initial;
+      }
+    }
   }
 
 }