💄 Updating the UI and style files.

_sass/bangsring/_syntax.scss

@@ -1,36 +1,182 @@
 /**
  * Code formatting
  */
+
 code {
-  letter-spacing: .1px;
   text-rendering: optimizeLegibility;
+  font-feature-settings: "calt"1;
+  font-variant-ligatures: normal;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
-  font-size: $small-font-size;
-  padding: 1px 3px;
+  font-size: 15px;
+  padding: 1px 4px;
+  position: relative;
+  top: -1px;
   border: 1px solid #d8d8d8;
-  background-color: #f5f5f5;
-  color: #3B454E;
+  background-color: #f6f6f6;
   border-radius: 2px;
-  font-family: $base-syntax-font;
+  font-family: $syntax-font-family;
 }
+
 pre.highlight {
-  background-color: #f5f5f5;
-  border-radius: 5px;
-  padding: 15px;
-  overflow: auto;
-  line-height: 24px;
-  color: #3B454E;
-  font-family: $base-syntax-font;
-    > code {
-      font-size: $small-font-size;
-      padding: 0;
-      overflow-x: auto;
-      line-height: 24px;
-      border: 0;
-      font-feature-settings: "calt" 1;
-      letter-spacing: .1px;
-    }
+  margin: 0 calc(51% - 50vw);
+  padding: 25px;
+  line-height: 1;
+  font-family: $syntax-font-family;
+  display: block;
+  overflow-x: auto;
+
+  >code {
+    width: 100%;
+    max-width: 37rem;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.5;
+    display: block;
+    border: 0;
+    font-variant-ligatures: normal;
+    background-color: transparent;
+    font-feature-settings: "calt"1;
+  }
+}
+
+.highlight table td {
+  padding: 5px;
+}
+
+.highlight table pre {
+  margin: 0;
+}
+
+.highlight,
+.highlight .w {
+  color: #fbf1c7;
+  background-color: #282828;
+}
+
+.highlight .err {
+  color: #fb4934;
+  background-color: #282828;
+  font-weight: bold;
+}
+
+.highlight .c,
+.highlight .cd,
+.highlight .cm,
+.highlight .c1,
+.highlight .cs {
+  color: #928374;
+  font-style: italic;
+}
+
+.highlight .cp {
+  color: #8ec07c;
+}
+
+.highlight .nt {
+  color: #fb4934;
+}
+
+.highlight .o,
+.highlight .ow {
+  color: #fbf1c7;
+}
+
+.highlight .p,
+.highlight .pi {
+  color: #fbf1c7;
+}
+
+.highlight .gi {
+  color: #b8bb26;
+  background-color: #282828;
+}
+
+.highlight .gd {
+  color: #fb4934;
+  background-color: #282828;
+}
+
+.highlight .gh {
+  color: #b8bb26;
+  font-weight: bold;
+}
+
+.highlight .k,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kv {
+  color: #fb4934;
+}
+
+.highlight .kc {
+  color: #d3869b;
+}
+
+.highlight .kt {
+  color: #fabd2f;
+}
+
+.highlight .kd {
+  color: #fe8019;
+}
+
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s2,
+.highlight .sh,
+.highlight .sx,
+.highlight .s1 {
+  color: #b8bb26;
+  font-style: italic;
+}
+
+.highlight .si {
+  color: #b8bb26;
+  font-style: italic;
+}
+
+.highlight .sr {
+  color: #b8bb26;
+  font-style: italic;
+}
+
+.highlight .se {
+  color: #fe8019;
+}
+
+.highlight .nn {
+  color: #8ec07c;
+}
+
+.highlight .nc {
+  color: #8ec07c;
+}
+
+.highlight .no {
+  color: #d3869b;
+}
+
+.highlight .na {
+  color: #b8bb26;
+}
+
+.highlight .m,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .il,
+.highlight .mo,
+.highlight .mb,
+.highlight .mx {
+  color: #d3869b;
+}
+
+.highlight .ss {
+  color: #83a598;
 }