Improve colors and styling.

scss/vendors/prismjs.scss

@@ -1,101 +1,92 @@
 /**
  * Prism Essence Theme, based on Material Theme.
+ *
+ * Author: Leo Nguyen
  */
+$prism-bg: hsl(220, 25%, 25%);
+$prism-gray: hsl(230, 40%, 70%);
+$prism-red: hsl(0, 100%, 80%);
+$prism-orange: hsl(15, 90%, 70%);
+$prism-yellow: hsl(50, 100%, 75%);
+$prism-green: hsl(100, 80%, 80%);
+$prism-cyan: hsl(200, 100%, 80%);
+$prism-blue: hsl(230, 100%, 80%);
+$prism-purple: hsl(275, 100%, 80%);
 
-code[class*="language-"],
-pre[class*="language-"] {
-  padding: 0;
-  color: #fff;
-  background: none;
+pre {
+  margin: 0.5em 0;
+  padding: 1.5em;
+  border-radius: 0.5rem;
+  background: $prism-bg;
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: 1em;
-  text-align: left;
+  font-size: 1rem;
+  line-height: 1.5;
+  overflow: auto;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
+
+  code {
+    padding: 0;
+    color: #fff;
+    background: $prism-bg;
+
+  }
 }
 
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-  border-radius: 8px;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #2d3748;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-/* Purple (keywords) */
-.token.important,
-.token.atrule,
+/* Purple (keyword) */
 .token.keyword,
-.token.builtin {
-  color: #d9a9ff; // #cc99cd;
+.token.important,
+.token.builtin,
+.token.atrule {
+  color: $prism-purple;
 }
 
-/* Yellow (classes, properties) */
+/* Yellow (entity, class) */
 .token.entity,
+.token.class,
 .token.name,
 .token.class-name,
-.token.class,
 .token.package,
 .token.scope,
 .token.attr-name {
-  color: #ffe484; // #FFCB6B;
+  color: $prism-yellow;
 }
 
-/* Blue (functions) */
+/* Blue (function) */
 .token.function-name,
-.token.boolean,
 .token.function {
-  color: #82AAFF;
+  color: $prism-blue;
 }
 
-/* Red (tags) */
+/* Red (tag) */
 .token.tag,
 .token.namespace,
 .token.selector,
 .token.deleted {
-  color: #ff8383; // #F07178;
+  color: $prism-red;
 }
 
-/* Green (strings, attribute values) */
+/* Green (string, attribute) */
 .token.string,
 .token.char,
 .token.property,
 .token.attr-value,
 .token.regex {
-  color: #b5f4a5; // #C3E88D;
+  color: $prism-green;
 }
 
-/* Orange (numbers) */
+/* Orange (number, literal) */
 .token.number,
+.token.boolean,
 .token.constant {
-  color: #F78C6C;
+  color: $prism-orange;
 }
 
-/* Cyan (signs) */
+/* Cyan (sign) */
 .token.symbol,
 .token.punctuation,
 .token.operator,
@@ -103,22 +94,22 @@ pre[class*="language-"] {
 .token.unit,
 .token.hexcode,
 .token.doctype-tag {
-  color: #89DDFF;
+  color: $prism-cyan;
 }
 
-/* White (variables, CSS pseudo classes) */
+/* White (variable, CSS pseudo class) */
 .token.variable,
 .token.pseudo-class {
   color: #fff;
 }
 
-/* Gray (comments) */
+/* Gray (comment) */
 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #99a3d0; // Palelight
+  color: $prism-gray;
 }
 
 .token.important,