From bab7100374037a4bba8629bbee2f0a0e97a6d39b Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Wed, 3 Jan 2018 09:45:21 -0500
Subject: [PATCH] Fix line number width in code blocks

Code blocks with short line widths can cause `td.gutter` width to stretch, adding in undesired white space.

Declaring widths on the table's columns fixes #1437

Add `{% highlight linenos %}` examples to test and demo sites.
---
 _sass/minimal-mistakes/_syntax.scss           |  2 ++
 .../2013-08-16-markup-syntax-highlighting.md  | 35 ++++++++++++-------
 .../2013-08-16-markup-syntax-highlighting.md  | 35 ++++++++++++-------
 3 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss
index cb4a97102731..78f6d32f80e0 100644
--- a/_sass/minimal-mistakes/_syntax.scss
+++ b/_sass/minimal-mistakes/_syntax.scss
@@ -44,11 +44,13 @@ figure.highlight {
 
   td {
     padding: 5px;
+    width: calc(100% - 1em);
     border: 0;
 
     /* line numbers*/
     &.gutter {
       padding-right: 1em;
+      width: 1em;
       color: rgba($muted-text-color, 0.5);
     }
   }
diff --git a/docs/_posts/2013-08-16-markup-syntax-highlighting.md b/docs/_posts/2013-08-16-markup-syntax-highlighting.md
index 20c620253213..736b7864ff7a 100644
--- a/docs/_posts/2013-08-16-markup-syntax-highlighting.md
+++ b/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: 2017-10-20T12:23:00-04:00
+last_modified_at: 2018-01-03T09:44:58-05:00
 header:
   teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
 tags: 
@@ -47,17 +47,6 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c
 </nav><!-- /.pagination -->{% endraw %}
 ```
 
-{% 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 %}
-{% endhighlight %}
-
 ```ruby
 module Jekyll
   class TagIndex < Page
@@ -95,6 +84,28 @@ Indentation matters. Be sure the indent of the code block aligns with the first
         
 3. Now you can do this.
 
+### Jekyll Highlight Tag
+
+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 %}
+{% endhighlight %}
+
+{% highlight wl linenos %}
+Module[{},
+  Sqrt[2]
+  4
+]
+{% endhighlight %}
+
 ### GitHub Gist Embed
 
 An example of a Gist embed below.
diff --git a/test/_posts/2013-08-16-markup-syntax-highlighting.md b/test/_posts/2013-08-16-markup-syntax-highlighting.md
index 20c620253213..73ad917254f6 100644
--- a/test/_posts/2013-08-16-markup-syntax-highlighting.md
+++ b/test/_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: 2017-10-20T12:23:00-04:00
+last_modified_at: 2018-01-03T09:45:06-05:00
 header:
   teaser: "assets/images/markup-syntax-highlighting-teaser.jpg"
 tags: 
@@ -47,17 +47,6 @@ GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/c
 </nav><!-- /.pagination -->{% endraw %}
 ```
 
-{% 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 %}
-{% endhighlight %}
-
 ```ruby
 module Jekyll
   class TagIndex < Page
@@ -95,6 +84,28 @@ Indentation matters. Be sure the indent of the code block aligns with the first
         
 3. Now you can do this.
 
+### Jekyll Highlight Tag
+
+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 %}
+{% endhighlight %}
+
+{% highlight wl linenos %}
+Module[{},
+  Sqrt[2]
+  4
+]
+{% endhighlight %}
+
 ### GitHub Gist Embed
 
 An example of a Gist embed below.