markdown fixes, code highlight fix

scss/mixins/_mixins.scss

@@ -26,6 +26,10 @@
     }
   }
 
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
   &:hover::-webkit-scrollbar-thumb {
     background: $gray-500;
 

scss/ui/_highlight.scss

@@ -6,275 +6,25 @@ $code-blue: #93ddfd;
 $code-white: #ffffff;
 $code-gray: #a0aec0;
 
-.highlight {
+pre.highlight,
+.highlight pre {
   max-height: 40rem;
-  margin: 1rem 0 2rem;
+  margin: 1.5rem 0;
   overflow: auto;
-  font-size: $font-size-base;
+  font-size: $code-font-size;
   background: $dark;
   border-radius: $border-radius;
   color: #ffffff;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  @include scrollbar(true);
+}
 
-  pre {
-    height: 100%;
-    margin-bottom: 0;
-    color: inherit;
-    white-space: pre-wrap;
-    background-color: transparent;
-  }
-
-  // stylelint-disable selector-class-pattern
-  .hll {
-    background-color: #ffffcc;
-  }
-
-  .c {
-    color: $code-gray;
-  }
-
-  .k {
-    color: $code-purple;
-  }
-
-  .o {
-    color: #555555;
-  }
-
-  .cm {
-    color: #999999;
-  }
-
-  .cp {
-    color: #009999;
-  }
-
-  .c1 {
-    color: #999999;
-  }
-
-  .cs {
-    color: #999999;
-  }
-
-  .gd {
-    background-color: #ffcccc;
-    border: 1px solid #cc0000;
-  }
-
-  .ge {
-    font-style: italic;
-  }
-
-  .gr {
-    color: #ff0000;
-  }
-
-  .gh {
-    color: #003300;
-  }
-
-  .gi {
-    background-color: #ccffcc;
-    border: 1px solid #00cc00;
-  }
-
-  .go {
-    color: #aaaaaa;
-  }
-
-  .gp {
-    color: #000099;
-  }
-
-  .gu {
-    color: #003300;
-  }
-
-  .gt {
-    color: #99cc66;
-  }
-
-  .kc {
-    color: #006699;
-  }
-
-  .kd {
-    color: #006699;
-  }
-
-  .kn {
-    color: #006699;
-  }
-
-  .kp {
-    color: #006699;
-  }
-
-  .kr {
-    color: #006699;
-  }
-
-  .kt {
-    color: #007788;
-  }
-
-  .m {
-    color: $code-red;
-  }
-
-  .s {
-    color: #d44950;
-  }
-
-  .na {
-    color: #4f9fcf;
-  }
-
-  .nc {
-    color: #00aa88;
-  }
-
-  .no {
-    color: #336600;
-  }
-
-  .nd {
-    color: #9999ff;
-  }
-
-  .ni {
-    color: #999999;
-  }
-
-  .ne {
-    color: #cc0000;
-  }
-
-  .nf {
-    color: #cc00ff;
-  }
-
-  .nl {
-    color: $code-yellow;
-  }
-
-  .nn {
-    color: #00ccff;
-  }
-
-  .nt {
-    color: $code-yellow;
-  }
-
-  .nv {
-    color: #003333;
-  }
-
-  .ow {
-    color: #000000;
-  }
-
-  .w {
-    color: #bbbbbb;
-  }
-
-  .mf {
-    color: #ff6600;
-  }
-
-  .mh {
-    color: #ff6600;
-  }
-
-  .mi {
-    color: #ff6600;
-  }
-
-  .mo {
-    color: #ff6600;
-  }
-
-  .sb {
-    color: #cc3300;
-  }
-
-  .sc {
-    color: #cc3300;
-  }
-
-  .sd {
-    font-style: italic;
-    color: #cc3300;
-  }
-
-  .s2 {
-    color: #cc3300;
-  }
-
-  .se {
-    color: #cc3300;
-  }
-
-  .sh {
-    color: #cc3300;
-  }
-
-  .si {
-    color: #aa0000;
-  }
-
-  .sx {
-    color: #cc3300;
-  }
-
-  .sr {
-    color: #33aaaa;
-  }
-
-  .s1 {
-    color: #cc3300;
-  }
-
-  .ss {
-    color: #ffcc33;
-  }
-
-  .bp {
-    color: #336666;
-  }
-
-  .vc {
-    color: #003333;
-  }
-
-  .vg {
-    color: #003333;
-  }
-
-  .vi {
-    color: #003333;
-  }
-
-  .il {
-    color: #ff6600;
-  }
-
-  .css .o,
-  .css .o + .nt,
-  .css .nt + .nt {
-    color: #999999;
-  }
-
-  .language-bash:before,
-  .language-sh:before {
-    color: #000099;
-    content: "$ ";
-    user-select: none;
-  }
-
-  .language-powershell:before {
-    color: #000099;
-    content: "PM> ";
-    user-select: none;
-  }
-}
\ No newline at end of file
+.highlight {
+  .c, .c1 { color: $code-gray; }
+  .na, .nx, .nl, .language-css & .na, .language-scss & .na { color: $code-yellow; }
+  .s, .dl, .s1, .s2, .mh { color: $code-green; }
+  .mi, .language-js & .nb, .nc, .nd, .nt { color: $code-blue; }
+  .language-html & .nt, .nb { color: $code-red; }
+  .k, .kd, .nv, .n { color: $code-purple; }
+}

scss/ui/_markdown.scss

@@ -2,14 +2,18 @@
 Markdown
  */
 .markdown {
-  font-size: 1rem;
   color: $gray-800;
 
+  @include media-breakpoint-up(md) {
+    font-size: 1rem;
+  }
+
   > :first-child {
     margin-top: 0;
   }
 
-  > :last-child {
+  > :last-child,
+  > :last-child .highlight {
     margin-bottom: 0;
   }
 
@@ -26,15 +30,17 @@ Markdown
 
     &:before {
       content: '';
-      padding-top: 2rem;
-      margin-top: -2rem;
+      padding-top: 2em;
+      margin-top: -2em;
       display: block;
     }
   }
 
   >hr {
-    margin-top: 3rem;
-    margin-bottom: 3rem;
+    @include media-breakpoint-up(md) {
+      margin-top: 3em;
+      margin-bottom: 3em;
+    }
   }
 
   > table {