From 250eb823d788aa3260d4b9dce0fb94fa71b7f299 Mon Sep 17 00:00:00 2001
From: Michael Rose <mmistakes@users.noreply.github.com>
Date: Thu, 4 Jan 2018 20:46:10 -0500
Subject: [PATCH] Improve syntax highlighting styles (#1450)

* Cleanup syntax highlighting styles
* Replace hardcoded color values with [base16](http://chriskempson.com/projects/base16/) Sass variables
* Harmonize padding between GFM code blocks and `{% highlight %}` code blocks
*  Improve readability of line numbers
* Add longer code block example to test double digit line numbers
* Adjust code block colors for specific skins
---
 _sass/minimal-mistakes/_syntax.scss         | 503 +++++++++++---------
 _sass/minimal-mistakes/_variables.scss      | 200 ++++----
 _sass/minimal-mistakes/skins/_contrast.scss |  18 +
 _sass/minimal-mistakes/skins/_dark.scss     |  18 +
 _sass/minimal-mistakes/skins/_dirt.scss     |  20 +-
 _sass/minimal-mistakes/skins/_neon.scss     |  18 +
 _sass/minimal-mistakes/skins/_plum.scss     |  18 +
 _sass/minimal-mistakes/skins/_sunrise.scss  |  18 +
 8 files changed, 490 insertions(+), 323 deletions(-)

diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss
index ed2f7f2..0c39516 100644
--- a/_sass/minimal-mistakes/_syntax.scss
+++ b/_sass/minimal-mistakes/_syntax.scss
@@ -6,29 +6,27 @@ div.highlighter-rouge,
 figure.highlight {
   position: relative;
   margin-bottom: 1em;
+  background: $base00;
+  color: $base05;
   font-family: $monospace;
   font-size: $type-size-6;
   line-height: 1.8;
   border-radius: $border-radius;
-  background-color: $code-background-color;
 
+  > pre,
   pre.highlight {
     margin: 0;
     padding: 1em;
   }
 }
 
-figure.highlight {
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
 .highlight table {
+  margin-bottom: 0;
   font-size: 1em;
   border: 0;
 
   td {
-    padding: 5px;
+    padding: 0;
     width: calc(100% - 1em);
     border: 0;
 
@@ -36,7 +34,14 @@ figure.highlight {
     &.gutter {
       padding-right: 1em;
       width: 1em;
-      color: rgba($muted-text-color, 0.5);
+      color: $base04;
+      border-right: 1px solid $base04;
+      text-align: right;
+    }
+
+    /* code */
+    &.code {
+      padding-left: 1em;
     }
   }
 
@@ -49,225 +54,263 @@ figure.highlight {
   width: 100%;
 }
 
-/*
-   Solarized Light
-   http://ethanschoonover.com/solarized
-
-   SOLARIZED HEX      ROLE
-   --------- -------- ------------------------------------------
-   base01    #586e75  body text / default code / primary content
-   base1     #93a1a1  comments / secondary content
-   base3     #fdf6e3  background
-   orange    #cb4b16  constants
-   red       #dc322f  regex, special keywords
-   blue      #22b3eb  reserved keywords
-   cyan      #2aa198  strings, numbers
-   green     #859900  operators, other keywords
-   ========================================================================== */
-
-.highlight .c {
-  color: #93a1a1;
-} /* Comment */
-.highlight .err {
-  color: #586e75;
-} /* Error */
-.highlight .g {
-  color: #586e75;
-} /* Generic */
-.highlight .k {
-  color: #859900;
-} /* Keyword */
-.highlight .l {
-  color: #586e75;
-} /* Literal */
-.highlight .n {
-  color: #586e75;
-} /* Name */
-.highlight .o {
-  color: #859900;
-} /* Operator */
-.highlight .x {
-  color: #cb4b16;
-} /* Other */
-.highlight .p {
-  color: #586e75;
-} /* Punctuation */
-.highlight .cm {
-  color: #93a1a1;
-} /* Comment.Multiline */
-.highlight .cp {
-  color: #859900;
-} /* Comment.Preproc */
-.highlight .c1 {
-  color: #93a1a1;
-} /* Comment.Single */
-.highlight .cs {
-  color: #859900;
-} /* Comment.Special */
-.highlight .gd {
-  color: #2aa198;
-} /* Generic.Deleted */
-.highlight .ge {
-  color: #586e75;
-  font-style: italic;
-} /* Generic.Emph */
-.highlight .gr {
-  color: #dc322f;
-} /* Generic.Error */
-.highlight .gh {
-  color: #cb4b16;
-} /* Generic.Heading */
-.highlight .gi {
-  color: #859900;
-} /* Generic.Inserted */
-.highlight .go {
-  color: #586e75;
-} /* Generic.Output */
-.highlight .gp {
-  color: #586e75;
-} /* Generic.Prompt */
-.highlight .gs {
-  color: #586e75;
-  font-weight: bold;
-} /* Generic.Strong */
-.highlight .gu {
-  color: #cb4b16;
-} /* Generic.Subheading */
-.highlight .gt {
-  color: #586e75;
-} /* Generic.Traceback */
-.highlight .kc {
-  color: #cb4b16;
-} /* Keyword.Constant */
-.highlight .kd {
-  color: #22b3eb;
-} /* Keyword.Declaration */
-.highlight .kn {
-  color: #859900;
-} /* Keyword.Namespace */
-.highlight .kp {
-  color: #859900;
-} /* Keyword.Pseudo */
-.highlight .kr {
-  color: #22b3eb;
-} /* Keyword.Reserved */
-.highlight .kt {
-  color: #dc322f;
-} /* Keyword.Type */
-.highlight .ld {
-  color: #586e75;
-} /* Literal.Date */
-.highlight .m {
-  color: #2aa198;
-} /* Literal.Number */
-.highlight .s {
-  color: #2aa198;
-} /* Literal.String */
-.highlight .na {
-  color: #586e75;
-} /* Name.Attribute */
-.highlight .nb {
-  color: #b58900;
-} /* Name.Builtin */
-.highlight .nc {
-  color: #22b3eb;
-} /* Name.Class */
-.highlight .no {
-  color: #cb4b16;
-} /* Name.Constant */
-.highlight .nd {
-  color: #22b3eb;
-} /* Name.Decorator */
-.highlight .ni {
-  color: #cb4b16;
-} /* Name.Entity */
-.highlight .ne {
-  color: #cb4b16;
-} /* Name.Exception */
-.highlight .nf {
-  color: #22b3eb;
-} /* Name.Function */
-.highlight .nl {
-  color: #586e75;
-} /* Name.Label */
-.highlight .nn {
-  color: #586e75;
-} /* Name.Namespace */
-.highlight .nx {
-  color: #586e75;
-} /* Name.Other */
-.highlight .py {
-  color: #586e75;
-} /* Name.Property */
-.highlight .nt {
-  color: #22b3eb;
-} /* Name.Tag */
-.highlight .nv {
-  color: #22b3eb;
-} /* Name.Variable */
-.highlight .ow {
-  color: #859900;
-} /* Operator.Word */
-.highlight .w {
-  color: #586e75;
-} /* Text.Whitespace */
-.highlight .mf {
-  color: #2aa198;
-} /* Literal.Number.Float */
-.highlight .mh {
-  color: #2aa198;
-} /* Literal.Number.Hex */
-.highlight .mi {
-  color: #2aa198;
-} /* Literal.Number.Integer */
-.highlight .mo {
-  color: #2aa198;
-} /* Literal.Number.Oct */
-.highlight .sb {
-  color: #93a1a1;
-} /* Literal.String.Backtick */
-.highlight .sc {
-  color: #2aa198;
-} /* Literal.String.Char */
-.highlight .sd {
-  color: #586e75;
-} /* Literal.String.Doc */
-.highlight .s2 {
-  color: #2aa198;
-} /* Literal.String.Double */
-.highlight .se {
-  color: #cb4b16;
-} /* Literal.String.Escape */
-.highlight .sh {
-  color: #586e75;
-} /* Literal.String.Heredoc */
-.highlight .si {
-  color: #2aa198;
-} /* Literal.String.Interpol */
-.highlight .sx {
-  color: #2aa198;
-} /* Literal.String.Other */
-.highlight .sr {
-  color: #dc322f;
-} /* Literal.String.Regex */
-.highlight .s1 {
-  color: #2aa198;
-} /* Literal.String.Single */
-.highlight .ss {
-  color: #2aa198;
-} /* Literal.String.Symbol */
-.highlight .bp {
-  color: #22b3eb;
-} /* Name.Builtin.Pseudo */
-.highlight .vc {
-  color: #22b3eb;
-} /* Name.Variable.Class */
-.highlight .vg {
-  color: #22b3eb;
-} /* Name.Variable.Global */
-.highlight .vi {
-  color: #22b3eb;
-} /* Name.Variable.Instance */
-.highlight .il {
-  color: #2aa198;
-} /* Literal.Number.Integer.Long */
+.highlight .hll {
+  background-color: $base06;
+}
+.highlight {
+  .c {
+    /* Comment */
+    color: $base04;
+  }
+  .err {
+    /* Error */
+    color: $base08;
+  }
+  .k {
+    /* Keyword */
+    color: $base0e;
+  }
+  .l {
+    /* Literal */
+    color: $base09;
+  }
+  .n {
+    /* Name */
+    color: $base05;
+  }
+  .o {
+    /* Operator */
+    color: $base0c;
+  }
+  .p {
+    /* Punctuation */
+    color: $base05;
+  }
+  .cm {
+    /* Comment.Multiline */
+    color: $base04;
+  }
+  .cp {
+    /* Comment.Preproc */
+    color: $base04;
+  }
+  .c1 {
+    /* Comment.Single */
+    color: $base04;
+  }
+  .cs {
+    /* Comment.Special */
+    color: $base04;
+  }
+  .gd {
+    /* Generic.Deleted */
+    color: $base08;
+  }
+  .ge {
+    /* Generic.Emph */
+    font-style: italic;
+  }
+  .gh {
+    /* Generic.Heading */
+    color: $base05;
+    font-weight: bold;
+  }
+  .gi {
+    /* Generic.Inserted */
+    color: $base0b;
+  }
+  .gp {
+    /* Generic.Prompt */
+    color: $base04;
+    font-weight: bold;
+  }
+  .gs {
+    /* Generic.Strong */
+    font-weight: bold;
+  }
+  .gu {
+    /* Generic.Subheading */
+    color: $base0c;
+    font-weight: bold;
+  }
+  .kc {
+    /* Keyword.Constant */
+    color: $base0e;
+  }
+  .kd {
+    /* Keyword.Declaration */
+    color: $base0e;
+  }
+  .kn {
+    /* Keyword.Namespace */
+    color: $base0c;
+  }
+  .kp {
+    /* Keyword.Pseudo */
+    color: $base0e;
+  }
+  .kr {
+    /* Keyword.Reserved */
+    color: $base0e;
+  }
+  .kt {
+    /* Keyword.Type */
+    color: $base0a;
+  }
+  .ld {
+    /* Literal.Date */
+    color: $base0b;
+  }
+  .m {
+    /* Literal.Number */
+    color: $base09;
+  }
+  .s {
+    /* Literal.String */
+    color: $base0b;
+  }
+  .na {
+    /* Name.Attribute */
+    color: $base0d;
+  }
+  .nb {
+    /* Name.Builtin */
+    color: $base05;
+  }
+  .nc {
+    /* Name.Class */
+    color: $base0a;
+  }
+  .no {
+    /* Name.Constant */
+    color: $base08;
+  }
+  .nd {
+    /* Name.Decorator */
+    color: $base0c;
+  }
+  .ni {
+    /* Name.Entity */
+    color: $base05;
+  }
+  .ne {
+    /* Name.Exception */
+    color: $base08;
+  }
+  .nf {
+    /* Name.Function */
+    color: $base0d;
+  }
+  .nl {
+    /* Name.Label */
+    color: $base05;
+  }
+  .nn {
+    /* Name.Namespace */
+    color: $base0a;
+  }
+  .nx {
+    /* Name.Other */
+    color: $base0d;
+  }
+  .py {
+    /* Name.Property */
+    color: $base05;
+  }
+  .nt {
+    /* Name.Tag */
+    color: $base0c;
+  }
+  .nv {
+    /* Name.Variable */
+    color: $base08;
+  }
+  .ow {
+    /* Operator.Word */
+    color: $base0c;
+  }
+  .w {
+    /* Text.Whitespace */
+    color: $base05;
+  }
+  .mf {
+    /* Literal.Number.Float */
+    color: $base09;
+  }
+  .mh {
+    /* Literal.Number.Hex */
+    color: $base09;
+  }
+  .mi {
+    /* Literal.Number.Integer */
+    color: $base09;
+  }
+  .mo {
+    /* Literal.Number.Oct */
+    color: $base09;
+  }
+  .sb {
+    /* Literal.String.Backtick */
+    color: $base0b;
+  }
+  .sc {
+    /* Literal.String.Char */
+    color: $base05;
+  }
+  .sd {
+    /* Literal.String.Doc */
+    color: $base04;
+  }
+  .s2 {
+    /* Literal.String.Double */
+    color: $base0b;
+  }
+  .se {
+    /* Literal.String.Escape */
+    color: $base09;
+  }
+  .sh {
+    /* Literal.String.Heredoc */
+    color: $base0b;
+  }
+  .si {
+    /* Literal.String.Interpol */
+    color: $base09;
+  }
+  .sx {
+    /* Literal.String.Other */
+    color: $base0b;
+  }
+  .sr {
+    /* Literal.String.Regex */
+    color: $base0b;
+  }
+  .s1 {
+    /* Literal.String.Single */
+    color: $base0b;
+  }
+  .ss {
+    /* Literal.String.Symbol */
+    color: $base0b;
+  }
+  .bp {
+    /* Name.Builtin.Pseudo */
+    color: $base05;
+  }
+  .vc {
+    /* Name.Variable.Class */
+    color: $base08;
+  }
+  .vg {
+    /* Name.Variable.Global */
+    color: $base08;
+  }
+  .vi {
+    /* Name.Variable.Instance */
+    color: $base08;
+  }
+  .il {
+    /* Literal.Number.Integer.Long */
+    color: $base09;
+  }
+}
diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss
index 06ca51d..df954f3 100644
--- a/_sass/minimal-mistakes/_variables.scss
+++ b/_sass/minimal-mistakes/_variables.scss
@@ -6,132 +6,148 @@
    Typography
    ========================================================================== */
 
-$doc-font-size                : 16 !default;
+$doc-font-size: 16 !default;
 
 /* paragraph indention */
-$paragraph-indent             : false !default; // true, false (default)
-$indent-var                   : 1.3em !default;
+$paragraph-indent: false !default; // true, false (default)
+$indent-var: 1.3em !default;
 
 /* system typefaces */
-$serif                        : Georgia, Times, serif !default;
-$sans-serif                   : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
-$monospace                    : Monaco, Consolas, "Lucida Console", monospace !default;
+$serif: Georgia, Times, serif !default;
+$sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
+  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
+$monospace: Monaco, Consolas, "Lucida Console", monospace !default;
 
 /* sans serif typefaces */
-$sans-serif-narrow            : $sans-serif !default;
-$helvetica                    : Helvetica, "Helvetica Neue", Arial, sans-serif !default;
+$sans-serif-narrow: $sans-serif !default;
+$helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;
 
 /* serif typefaces */
-$georgia                      : Georgia, serif !default;
-$times                        : Times, serif !default;
-$bodoni                       : "Bodoni MT", serif !default;
-$calisto                      : "Calisto MT", serif !default;
-$garamond                     : Garamond, serif !default;
+$georgia: Georgia, serif !default;
+$times: Times, serif !default;
+$bodoni: "Bodoni MT", serif !default;
+$calisto: "Calisto MT", serif !default;
+$garamond: Garamond, serif !default;
 
-$global-font-family           : $sans-serif !default;
-$header-font-family           : $sans-serif !default;
-$caption-font-family          : $serif !default;
+$global-font-family: $sans-serif !default;
+$header-font-family: $sans-serif !default;
+$caption-font-family: $serif !default;
 
 /* type scale */
-$type-size-1                  : 2.441em !default;  // ~39.056px
-$type-size-2                  : 1.953em !default;  // ~31.248px
-$type-size-3                  : 1.563em !default;  // ~25.008px
-$type-size-4                  : 1.25em !default;   // ~20px
-$type-size-5                  : 1em !default;      // ~16px
-$type-size-6                  : 0.75em !default;   // ~12px
-$type-size-7                  : 0.6875em !default; // ~11px
-$type-size-8                  : 0.625em !default;  // ~10px
-
+$type-size-1: 2.441em !default; // ~39.056px
+$type-size-2: 1.953em !default; // ~31.248px
+$type-size-3: 1.563em !default; // ~25.008px
+$type-size-4: 1.25em !default; // ~20px
+$type-size-5: 1em !default; // ~16px
+$type-size-6: 0.75em !default; // ~12px
+$type-size-7: 0.6875em !default; // ~11px
+$type-size-8: 0.625em !default; // ~10px
 
 /*
    Colors
    ========================================================================== */
 
-$gray                         : #7a8288 !default;
-$dark-gray                    : mix(#000, $gray, 40%) !default;
-$darker-gray                  : mix(#000, $gray, 60%) !default;
-$light-gray                   : mix(#fff, $gray, 50%) !default;
-$lighter-gray                 : mix(#fff, $gray, 90%) !default;
-
-$background-color             : #fff !default;
-$code-background-color        : #fafafa !default;
-$code-background-color-dark   : $light-gray !default;
-$text-color                   : $dark-gray !default;
-$muted-text-color             : mix(#fff, $text-color, 35%) !default;
-$border-color                 : $lighter-gray !default;
-$form-background-color        : $lighter-gray !default;
-$footer-background-color      : $lighter-gray !default;
-
-$primary-color                : #7a8288 !default;
-$success-color                : #62c462 !default;
-$warning-color                : #f89406 !default;
-$danger-color                 : #ee5f5b !default;
-$info-color                   : #52adc8 !default;
+$gray: #7a8288 !default;
+$dark-gray: mix(#000, $gray, 40%) !default;
+$darker-gray: mix(#000, $gray, 60%) !default;
+$light-gray: mix(#fff, $gray, 50%) !default;
+$lighter-gray: mix(#fff, $gray, 90%) !default;
+
+$background-color: #fff !default;
+$code-background-color: #fafafa !default;
+$code-background-color-dark: $light-gray !default;
+$text-color: $dark-gray !default;
+$muted-text-color: mix(#fff, $text-color, 35%) !default;
+$border-color: $lighter-gray !default;
+$form-background-color: $lighter-gray !default;
+$footer-background-color: $lighter-gray !default;
+
+$primary-color: #7a8288 !default;
+$success-color: #62c462 !default;
+$warning-color: #f89406 !default;
+$danger-color: #ee5f5b !default;
+$info-color: #52adc8 !default;
 
 /* YIQ color contrast */
-$yiq-contrasted-dark-default  : $dark-gray !default;
-$yiq-contrasted-light-default : #fff !default;
-$yiq-contrasted-threshold     : 175 !default;
-$yiq-debug                    : false !default;
+$yiq-contrasted-dark-default: $dark-gray !default;
+$yiq-contrasted-light-default: #fff !default;
+$yiq-contrasted-threshold: 175 !default;
+$yiq-debug: false !default;
 
 /* brands */
-$behance-color                : #1769FF !default;
-$bitbucket-color              : #205081 !default;
-$dribbble-color               : #ea4c89 !default;
-$facebook-color               : #3b5998 !default;
-$flickr-color                 : #ff0084 !default;
-$foursquare-color             : #0072b1 !default;
-$github-color                 : #171516 !default;
-$google-plus-color            : #dd4b39 !default;
-$instagram-color              : #517fa4 !default;
-$lastfm-color                 : #d51007 !default;
-$linkedin-color               : #007bb6 !default;
-$pinterest-color              : #cb2027 !default;
-$rss-color                    : #fa9b39 !default;
-$soundcloud-color             : #ff3300 !default;
-$stackoverflow-color          : #fe7a15 !default;
-$tumblr-color                 : #32506d !default;
-$twitter-color                : #55acee !default;
-$vimeo-color                  : #1ab7ea !default;
-$vine-color                   : #00bf8f !default;
-$youtube-color                : #bb0000 !default;
-$xing-color                   : #006567 !default;
+$behance-color: #1769ff !default;
+$bitbucket-color: #205081 !default;
+$dribbble-color: #ea4c89 !default;
+$facebook-color: #3b5998 !default;
+$flickr-color: #ff0084 !default;
+$foursquare-color: #0072b1 !default;
+$github-color: #171516 !default;
+$google-plus-color: #dd4b39 !default;
+$instagram-color: #517fa4 !default;
+$lastfm-color: #d51007 !default;
+$linkedin-color: #007bb6 !default;
+$pinterest-color: #cb2027 !default;
+$rss-color: #fa9b39 !default;
+$soundcloud-color: #ff3300 !default;
+$stackoverflow-color: #fe7a15 !default;
+$tumblr-color: #32506d !default;
+$twitter-color: #55acee !default;
+$vimeo-color: #1ab7ea !default;
+$vine-color: #00bf8f !default;
+$youtube-color: #bb0000 !default;
+$xing-color: #006567 !default;
 
 /* links */
-$link-color                   : $info-color !default;
-$link-color-hover             : mix(#000, $link-color, 25%) !default;
-$link-color-visited           : mix(#fff, $link-color, 25%) !default;
-$masthead-link-color          : $primary-color !default;
-$masthead-link-color-hover    : mix(#000, $primary-color, 25%) !default;
-$navicon-link-color-hover     : mix(#fff, $primary-color, 75%) !default;
+$link-color: $info-color !default;
+$link-color-hover: mix(#000, $link-color, 25%) !default;
+$link-color-visited: mix(#fff, $link-color, 25%) !default;
+$masthead-link-color: $primary-color !default;
+$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
+$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
+
+/* syntax highlighting (base16) */
+$base00: #263238 !default;
+$base01: #2e3c43 !default;
+$base02: #314549 !default;
+$base03: #546e7a !default;
+$base04: #b2ccd6 !default;
+$base05: #eeffff !default;
+$base06: #eeffff !default;
+$base07: #ffffff !default;
+$base08: #f07178 !default;
+$base09: #f78c6c !default;
+$base0a: #ffcb6b !default;
+$base0b: #c3e88d !default;
+$base0c: #89ddff !default;
+$base0d: #82aaff !default;
+$base0e: #c792ea !default;
+$base0f: #ff5370 !default;
 
 /*
    Breakpoints
    ========================================================================== */
 
-$small                        : 600px !default;
-$medium                       : 768px !default;
-$medium-wide                  : 900px !default;
-$large                        : 1024px !default;
-$x-large                      : 1280px !default;
-
+$small: 600px !default;
+$medium: 768px !default;
+$medium-wide: 900px !default;
+$large: 1024px !default;
+$x-large: 1280px !default;
 
 /*
    Grid
    ========================================================================== */
 
-$right-sidebar-width-narrow   : 200px !default;
-$right-sidebar-width          : 300px !default;
-$right-sidebar-width-wide     : 400px !default;
-
+$right-sidebar-width-narrow: 200px !default;
+$right-sidebar-width: 300px !default;
+$right-sidebar-width-wide: 400px !default;
 
 /*
    Other
    ========================================================================== */
 
-$border-radius                : 4px !default;
-$box-shadow                   : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
-$navicon-width                : 1.5rem !default;
-$navicon-height               : 0.25rem !default;
-$global-transition            : all 0.2s ease-in-out !default;
-$intro-transition             : intro 0.3s both !default;
+$border-radius: 4px !default;
+$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
+$navicon-width: 1.5rem !default;
+$navicon-height: 0.25rem !default;
+$global-transition: all 0.2s ease-in-out !default;
+$intro-transition: intro 0.3s both !default;
diff --git a/_sass/minimal-mistakes/skins/_contrast.scss b/_sass/minimal-mistakes/skins/_contrast.scss
index 41fb391..4635e53 100644
--- a/_sass/minimal-mistakes/skins/_contrast.scss
+++ b/_sass/minimal-mistakes/skins/_contrast.scss
@@ -13,6 +13,24 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: $text-color !default;
 $navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
 
+/* contrast syntax highlighting (base16) */
+$base00: #000000 !default;
+$base01: #242422 !default;
+$base02: #484844 !default;
+$base03: #6c6c66 !default;
+$base04: #918f88 !default;
+$base05: #b5b3aa !default;
+$base06: #d9d7cc !default;
+$base07: #fdfbee !default;
+$base08: #ff6c60 !default;
+$base09: #e9c062 !default;
+$base0a: #ffffb6 !default;
+$base0b: #a8ff60 !default;
+$base0c: #c6c5fe !default;
+$base0d: #96cbfe !default;
+$base0e: #ff73fd !default;
+$base0f: #b18a3d !default;
+
 .page__content {
   .notice,
   .notice--primary,
diff --git a/_sass/minimal-mistakes/skins/_dark.scss b/_sass/minimal-mistakes/skins/_dark.scss
index aa15e9a..1be4ffe 100644
--- a/_sass/minimal-mistakes/skins/_dark.scss
+++ b/_sass/minimal-mistakes/skins/_dark.scss
@@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
 $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
+/* dark syntax highlighting (base16) */
+$base00: #ffffff !default;
+$base01: #e0e0e0 !default;
+$base02: #d0d0d0 !default;
+$base03: #b0b0b0 !default;
+$base04: #000000 !default;
+$base05: #101010 !default;
+$base06: #151515 !default;
+$base07: #202020 !default;
+$base08: #ff0086 !default;
+$base09: #fd8900 !default;
+$base0a: #aba800 !default;
+$base0b: #00c918 !default;
+$base0c: #1faaaa !default;
+$base0d: #3777e6 !default;
+$base0e: #ad00a1 !default;
+$base0f: #cc6633 !default;
+
 .page__footer-follow .social-icons .svg-inline--fa {
   color: inherit;
 }
diff --git a/_sass/minimal-mistakes/skins/_dirt.scss b/_sass/minimal-mistakes/skins/_dirt.scss
index e799373..5090f55 100644
--- a/_sass/minimal-mistakes/skins/_dirt.scss
+++ b/_sass/minimal-mistakes/skins/_dirt.scss
@@ -12,4 +12,22 @@ $footer-background-color: #e9dcbe !default;
 $link-color: #343434 !default;
 $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: $text-color !default;
-$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
\ No newline at end of file
+$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
+
+/* dirt syntax highlighting (base16) */
+$base00: #231e18 !default;
+$base01: #302b25 !default;
+$base02: #48413a !default;
+$base03: #9d8b70 !default;
+$base04: #b4a490 !default;
+$base05: #cabcb1 !default;
+$base06: #d7c8bc !default;
+$base07: #e4d4c8 !default;
+$base08: #d35c5c !default;
+$base09: #ca7f32 !default;
+$base0a: #e0ac16 !default;
+$base0b: #b7ba53 !default;
+$base0c: #6eb958 !default;
+$base0d: #88a4d3 !default;
+$base0e: #bb90e2 !default;
+$base0f: #b49368 !default;
diff --git a/_sass/minimal-mistakes/skins/_neon.scss b/_sass/minimal-mistakes/skins/_neon.scss
index 979432c..2afc732 100644
--- a/_sass/minimal-mistakes/skins/_neon.scss
+++ b/_sass/minimal-mistakes/skins/_neon.scss
@@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
 $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
+/* neon syntax highlighting (base16) */
+$base00: #ffffff !default;
+$base01: #e0e0e0 !default;
+$base02: #d0d0d0 !default;
+$base03: #b0b0b0 !default;
+$base04: #000000 !default;
+$base05: #101010 !default;
+$base06: #151515 !default;
+$base07: #202020 !default;
+$base08: #ff0086 !default;
+$base09: #fd8900 !default;
+$base0a: #aba800 !default;
+$base0b: #00c918 !default;
+$base0c: #1faaaa !default;
+$base0d: #3777e6 !default;
+$base0e: #ad00a1 !default;
+$base0f: #cc6633 !default;
+
 .author__urls.social-icons .fa,
 .page__footer-follow .social-icons .svg-inline--fa {
   color: inherit;
diff --git a/_sass/minimal-mistakes/skins/_plum.scss b/_sass/minimal-mistakes/skins/_plum.scss
index a4366e4..05291ad 100644
--- a/_sass/minimal-mistakes/skins/_plum.scss
+++ b/_sass/minimal-mistakes/skins/_plum.scss
@@ -18,6 +18,24 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
 $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
+/* plum syntax highlighting (base16) */
+$base00: #ffffff !default;
+$base01: #e0e0e0 !default;
+$base02: #d0d0d0 !default;
+$base03: #b0b0b0 !default;
+$base04: #000000 !default;
+$base05: #101010 !default;
+$base06: #151515 !default;
+$base07: #202020 !default;
+$base08: #ff0086 !default;
+$base09: #fd8900 !default;
+$base0a: #aba800 !default;
+$base0b: #00c918 !default;
+$base0c: #1faaaa !default;
+$base0d: #3777e6 !default;
+$base0e: #ad00a1 !default;
+$base0f: #cc6633 !default;
+
 .author__urls.social-icons .fa,
 .page__footer-follow .social-icons .svg-inline--fa {
   color: inherit;
diff --git a/_sass/minimal-mistakes/skins/_sunrise.scss b/_sass/minimal-mistakes/skins/_sunrise.scss
index e685a1c..1f0dca3 100644
--- a/_sass/minimal-mistakes/skins/_sunrise.scss
+++ b/_sass/minimal-mistakes/skins/_sunrise.scss
@@ -20,6 +20,24 @@ $masthead-link-color: $text-color !default;
 $masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
 $navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
 
+/* sunrise syntax highlighting (base16) */
+$base00: #1d1f21 !default;
+$base01: #282a2e !default;
+$base02: #373b41 !default;
+$base03: #969896 !default;
+$base04: #b4b7b4 !default;
+$base05: #c5c8c6 !default;
+$base06: #e0e0e0 !default;
+$base07: #ffffff !default;
+$base08: #cc6666 !default;
+$base09: #de935f !default;
+$base0a: #f0c674 !default;
+$base0b: #b5bd68 !default;
+$base0c: #8abeb7 !default;
+$base0d: #81a2be !default;
+$base0e: #b294bb !default;
+$base0f: #a3685a !default;
+
 .author__urls.social-icons .fa,
 .page__footer-follow .social-icons .svg-inline--fa {
   color: inherit;
-- 
2.43.0