feat: html code highlighter

client/themes/default/scss/app.scss

@@ -4,9 +4,9 @@
   color: mc('grey', '800');
 
   h1 {
-    padding-left: 16px;
+    padding-left: 24px;
     color: mc('blue', '800');
-    margin-top: 16px;
+    margin-top: 1rem;
     position: relative;
 
     &::after {
@@ -19,12 +19,12 @@
       background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
     }
 
-    & + h2 {
+    & + h2, & + h3 {
       margin-top: 8px;
     }
   }
   h2 {
-    margin-left: 16px;
+    margin-left: 24px;
     padding: 8px 0 0 0;
     color: mc('grey', '800');
     position: relative;
@@ -38,11 +38,114 @@
       height: 1px;
       background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
     }
+
+    & + h3 {
+      margin-top: 8px;
+    }
+  }
+  h3 {
+    margin-left: 24px;
+    padding: 8px 0 0 0;
+    color: mc('grey', '700');
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0));
+    }
   }
 
   p {
-    padding: 16px 16px 0 16px;
+    padding: 1rem 24px 0 24px;
     margin: 0;
     text-align: justify;
   }
+
+  code {
+    background-color: transparent;
+    font-family: 'Source Code Pro', monospace;
+    font-weight: normal;
+    font-size: 1rem;
+
+    &::before, &::after {
+      display: none;
+    }
+  }
+
+  .hljs{
+    display: block;
+    overflow-x: auto;
+    padding: 1rem;
+    background: #232323;
+    color: #e6e1dc;
+    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
+  }
+
 }