Support for the linenos option on highlighted code

The added examples in `docs/index-test.md` extend the previous examplees of highlighting, documenting the required inout.

_includes/fix_linenos.html

@@ -0,0 +1,33 @@
+{% comment -%}
+Fixes the HTML for highlighted code with linenos.
+
+Derived from the workaround provided by Dmitry Hrabrov (DeXP) at
+https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
+
+Explanation:
+
+The HTML produced by Rouge with the linenos option matches CSS `code table`.
+Jekyll (<= 4.1.1) always wraps the highlighted HTML with `pre`, which is 
+unnecessary and non-conforming, and leads to validation error reports.
+The fix removes the `pre` tags around `_code` whenever it contains the pattern
+`<table class="rouge-table">`. This change avoids validation errors, and
+allows the use of [Jekyll layout for compressing HTML](http://jch.penibelst.de),
+which relies on `pre` tags not being nested. 
+
+Usage:
+
+{% capture fix_linenos_code %}{% highlight AnyLanguage linenos %}
+Some code
+{% endhighlight %}{% endcapture %}{% include fix_linenos.html %}{{ fix_linenos_code }}
+
+Caveats:
+
+The above does not work when `Some code` happens to contain the matched string 
+`<table class="rouge-table">`.
+
+{%- endcomment %}
+
+{% if fix_linenos_code contains '<table class="rouge-table">' %}
+    {% assign fix_linenos_code = fix_linenos_code | replace: "<pre><code", "<code" %}
+    {% assign fix_linenos_code = fix_linenos_code | replace: "</code></pre>", "</code>" %}
+{% endif %}

_sass/code.scss

@@ -26,6 +26,73 @@ figure.highlight {
   }
 }
 
+// Using Liquid tags for highlighting, optionally with linenos
+//
+// See docs/index-test.md for tests
+
+// Without linenos: figure.highlight > pre > code > div > span*
+
+figure.highlight {
+  padding: 0;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  background-color: $code-background-color;
+  border-radius: $border-radius;
+  -webkit-overflow-scrolling: touch;
+
+  pre {
+    padding: $sp-3;
+    margin-top: 0;
+    margin-bottom: 0;  
+  }
+}
+
+// With linenos: 
+
+figure.highlight > pre > code, figure.highlight > code 
+{
+
+td, td > pre {
+  @include fs-2;
+  min-width: 0;
+  padding: 0;
+  background-color: $code-background-color;
+  border-bottom: none;
+  border-left: none;
+}
+
+td.gutter {
+  padding-right: 1rem;
+}
+  
+pre {
+  line-height: 2;
+  margin-top: 0;
+}
+
+tbody > tr > td {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+}
+
+// Jekyll 4.1.1: figure.highlight > pre > code > div > table > ...
+
+figure.highlight > pre > code .table-wrapper {
+  padding: 0;
+  margin-bottom: 0;
+  box-shadow: none;
+  border: none;
+}
+
+// Using fix_linenos: figure.highlight > code > div > table > ...
+
+figure.highlight > code .table-wrapper {
+  padding: $sp-3;
+}
+
+
 .highlighter-rouge {
   margin-bottom: $sp-3;
 }

docs/index-test.md

@@ -33,12 +33,44 @@ var fun = function lang(l) {
 ```
 
 ```ruby
-# Ruby code with syntax highlighting
+# Ruby code with syntax highlighting in fences
 GitHubPages::Dependencies.gems.each do |gem, version|
   s.add_dependency(gem, "= #{version}")
 end
 ```
 
+{% highlight ruby %}
+# Ruby code with syntax highlighting using Liquid
+GitHubPages::Dependencies.gems.each do |gem, version|
+  s.add_dependency(gem, "= #{version}")
+end
+{% endhighlight %}
+
+{% capture fix_linenos_code %}{% highlight ruby linenos %}
+# Ruby code with syntax highlighting and fixed line numbers using Liquid
+GitHubPages::Dependencies.gems.each do |gem, version|
+  s.add_dependency(gem, "= #{version}")
+end
+{% endhighlight %}{% endcapture %}{% include fix_linenos.html %}{{ fix_linenos_code }}
+
+{% comment %}
+
+The code example below requires the following setting in `_config.yml`:
+```yaml
+compress_html:
+  ignore:
+    envs: all
+```
+
+{% highlight ruby linenos %}
+# Ruby code with syntax highlighting and unfixed line numbers using Liquid
+GitHubPages::Dependencies.gems.each do |gem, version|
+  s.add_dependency(gem, "= #{version}")
+end
+{% endhighlight %}
+
+{% endcomment %}
+
 #### [](#header-4)Header 4
 
 *   This is an unordered list following a header.