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 mmistakes#1437 Add `{% highlight linenos %}` examples to test and demo sites.
kkunapuli · Jan 3, 2018 · bab7100 · bab7100
1 parent 40251a0
commit bab7100
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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.