feat: code highlighting client-side

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