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

docs/_posts/2013-08-16-markup-syntax-highlighting.md

@@ -1,7 +1,7 @@
 ---
 title: "Markup: Syntax Highlighting"
 excerpt: "Post displaying the various ways of highlighting code in Markdown."
-last_modified_at: 2018-01-03T09:44:58-05:00
+last_modified_at: 2018-01-03T09:45:06-05:00
 header:
   teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
 tags: 
@@ -88,15 +88,29 @@ Indentation matters. Be sure the indent of the code block aligns with the first
 
 An example of a code blocking using Jekyll's [`{% raw %}{% highlight %}{% endraw %}` tag](https://jekyllrb.com/docs/templates/#code-snippet-highlighting).
 
-{% highlight html linenos %}
-{% raw %}<nav class="pagination" role="navigation">
-  {% if page.previous %}
-    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
-  {% endif %}
-  {% if page.next %}
-    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
-  {% endif %}
-</nav><!-- /.pagination -->{% endraw %}
+{% highlight javascript linenos %}
+// 'gulp html' -- does nothing
+// 'gulp html --prod' -- minifies and gzips HTML files for production
+gulp.task('html', () => {
+  return gulp.src(paths.siteFolderName + paths.htmlPattern)
+    .pipe(when(argv.prod, htmlmin({
+      removeComments: true,
+      collapseWhitespace: true,
+      collapseBooleanAttributes: false,
+      removeAttributeQuotes: false,
+      removeRedundantAttributes: false,
+      minifyJS: true,
+      minifyCSS: true
+    })))
+    .pipe(when(argv.prod, size({title: 'optimized HTML'})))
+    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
+    .pipe(when(argv.prod, gzip({append: true})))
+    .pipe(when(argv.prod, size({
+      title: 'gzipped HTML',
+      gzip: true
+    })))
+    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
+});
 {% endhighlight %}
 
 {% highlight wl linenos %}