From b41f28dadee8fe5e02b168341f4b5b46f97f0175 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Sat, 4 Jul 2020 19:21:49 +0200
Subject: [PATCH 01/12] 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 | 33 +++++++++++++++++++
 _sass/code.scss            | 67 ++++++++++++++++++++++++++++++++++++++
 docs/index-test.md         | 34 ++++++++++++++++++-
 3 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 _includes/fix_linenos.html

diff --git a/_includes/fix_linenos.html b/_includes/fix_linenos.html
new file mode 100644
index 0000000..bf60027
--- /dev/null
+++ b/_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 %}
diff --git a/_sass/code.scss b/_sass/code.scss
index affc8aa..397f0f0 100644
--- a/_sass/code.scss
+++ b/_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;
 }
diff --git a/docs/index-test.md b/docs/index-test.md
index 967ba6f..ec1239b 100644
--- a/docs/index-test.md
+++ b/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.

From 7df7572d913e44b0cbbe824ff6574c5059a44a9b Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Sat, 4 Jul 2020 21:12:00 +0200
Subject: [PATCH 02/12] Update code.scss

Correected layout, order, values.
---
 _sass/code.scss | 50 ++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index 397f0f0..0d70d1a 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -43,37 +43,37 @@ figure.highlight {
   pre {
     padding: $sp-3;
     margin-top: 0;
-    margin-bottom: 0;  
+    margin-bottom: 0;
   }
 }
 
-// With linenos: 
+// With linenos:
 
-figure.highlight > pre > code, figure.highlight > code 
-{
+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,
+  td > pre {
+    @include fs-2;
+    min-width: 0;
+    padding: 0;
+    background-color: $code-background-color;
+    border-bottom: 0;
+    border-left: 0;
+  }
 
-td.gutter {
-  padding-right: 1rem;
-}
-  
-pre {
-  line-height: 2;
-  margin-top: 0;
-}
+  td.gutter {
+    padding-right: 1rem;
+  }
+    
+  pre {
+    margin-top: 0;
+    line-height: 2;
+  }
 
-tbody > tr > td {
-  border-bottom: none;
-  padding-bottom: 0;
-}
+  tbody > tr > td {
+    padding-bottom: 0;
+    border-bottom: 0;
+  }
 
 }
 
@@ -82,8 +82,8 @@ tbody > tr > td {
 figure.highlight > pre > code .table-wrapper {
   padding: 0;
   margin-bottom: 0;
+  border: 0;
   box-shadow: none;
-  border: none;
 }
 
 // Using fix_linenos: figure.highlight > code > div > table > ...

From 74845b4a0ee24907b624ae993d9a912eadd758c5 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Sat, 4 Jul 2020 21:17:18 +0200
Subject: [PATCH 03/12] Update code.scss

Fixed more layout details. Numbers of selectors still to be fixed.
---
 _sass/code.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index 0d70d1a..72fa336 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -49,7 +49,8 @@ figure.highlight {
 
 // With linenos:
 
-figure.highlight > pre > code, figure.highlight > code {
+figure.highlight > pre > code,
+figure.highlight > code {
 
   td,
   td > pre {
@@ -64,7 +65,7 @@ figure.highlight > pre > code, figure.highlight > code {
   td.gutter {
     padding-right: 1rem;
   }
-    
+
   pre {
     margin-top: 0;
     line-height: 2;
@@ -74,7 +75,6 @@ figure.highlight > pre > code, figure.highlight > code {
     padding-bottom: 0;
     border-bottom: 0;
   }
-
 }
 
 // Jekyll 4.1.1: figure.highlight > pre > code > div > table > ...
@@ -92,7 +92,6 @@ figure.highlight > code .table-wrapper {
   padding: $sp-3;
 }
 
-
 .highlighter-rouge {
   margin-bottom: $sp-3;
 }

From fdaf5a276bab46b0006b6787e2c1137a4ed4615c Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Mon, 6 Jul 2020 15:04:30 +0200
Subject: [PATCH 04/12] Moved tests from index-test.md to linenos-test.md

This should revert the changes made to index-test.md
---
 docs/index-test.md   | 34 +--------------------------
 docs/linenos-test.md | 56 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 33 deletions(-)
 create mode 100644 docs/linenos-test.md

diff --git a/docs/index-test.md b/docs/index-test.md
index ec1239b..967ba6f 100644
--- a/docs/index-test.md
+++ b/docs/index-test.md
@@ -33,44 +33,12 @@ var fun = function lang(l) {
 ```
 
 ```ruby
-# Ruby code with syntax highlighting in fences
+# Ruby code with syntax highlighting
 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.
diff --git a/docs/linenos-test.md b/docs/linenos-test.md
new file mode 100644
index 0000000..48e9603
--- /dev/null
+++ b/docs/linenos-test.md
@@ -0,0 +1,56 @@
+---
+layout: default
+title: Markdown line number test
+nav_order: 999
+---
+
+```
+Some unknown code in fences
+```
+
+Some of the code examples below require the following setting in `_config.yml`:
+```yaml
+compress_html:
+  ignore:
+    envs: all
+```
+
+```js
+// Javascript code with syntax highlighting in fences
+var fun = function lang(l) {
+  dateformat.i18n = require('./lang/' + l)
+  return true;
+}
+```
+
+```ruby
+# 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 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 code=code %}
+{% assign code = nil %}
+
+{% 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 %}

From b73300595b679c4b6532107b955f30c3195c0ba3 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Mon, 6 Jul 2020 15:07:53 +0200
Subject: [PATCH 05/12] Simplified the use of fix_linenos

Now using an include parameter.
Enhanced to support Markdown with code fences.
---
 _includes/fix_linenos.html | 68 ++++++++++++++++++++++++++++----------
 1 file changed, 50 insertions(+), 18 deletions(-)

diff --git a/_includes/fix_linenos.html b/_includes/fix_linenos.html
index bf60027..6243fb0 100644
--- a/_includes/fix_linenos.html
+++ b/_includes/fix_linenos.html
@@ -1,33 +1,65 @@
-{% comment -%}
-Fixes the HTML for highlighted code with linenos.
+{%- comment -%}
+This file can be used to fix the HTML produced by Jekyll for highlighted
+code with line numbers.
 
-Derived from the workaround provided by Dmitry Hrabrov (DeXP) at
+It works with `{% highlight some_language linenos %}...{% endhighlight %}`
+and with the Kramdown option to add line numbers to fenced code.
+
+The implementation was derived from the workaround provided by 
+Dmitry Hrabrov (DeXP) at
 https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
 
-Explanation:
+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. 
+The HTML produced by Rouge highlighting with lie numbers is of the form
+`code table`. Jekyll (<= 4.1.1) always wraps the highlighted HTML
+with `pre`. This wrapping is not only unnecessary, but also transforms
+the conforming HTML produced by Rouge to non-conforming HTML, which
+results in HTML validation error reports. 
 
-Usage:
+The fix removes the outer `pre` tags whenever they contain the pattern
+`<table class="rouge-table">`.
+  
+Apart from avoiding HTML validation errors, the fix allows the use of
+the [Jekyll layout for compressing HTML](http://jch.penibelst.de),
+which relies on `pre` tags not being nested, according to
+https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-172069842 
 
-{% capture fix_linenos_code %}{% highlight AnyLanguage linenos %}
+USAGE
+
+(Any names can be used for `some_var` and `some_language`.)
+
+{% capture some_var %}
+{% highlight some_language linenos %}
 Some code
-{% endhighlight %}{% endcapture %}{% include fix_linenos.html %}{{ fix_linenos_code }}
+{% endhighlight %}
+{% endcapture %}
+{% include fix_linenos.html code=some_var %}
 
-Caveats:
+For code fences:
+
+{% capture some_var %}
+```some_language
+Some code
+```
+{% endcapture %}
+{% assign some_var = some_var | markdownify %}
+{% include fix_linenos.html code=some_var %}
+
+CAVEATS
 
 The above does not work when `Some code` happens to contain the matched string 
 `<table class="rouge-table">`.
 
-{%- endcomment %}
+The use of this file overwrites the variable `fix_linenos_code` with `nil`.
 
+{%- endcomment -%}
+
+{% assign fix_linenos_code = include.code %}
 {% 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>" %}
+  {% assign fix_linenos_code = fix_linenos_code | replace: '<pre class="highlight">', '<pre>' %}
+  {% assign fix_linenos_code = fix_linenos_code | replace: "<pre><code", "<code" %}
+  {% assign fix_linenos_code = fix_linenos_code | replace: "</code></pre>", "</code>" %}
 {% endif %}
+{{ fix_linenos_code }}
+{% assign fix_linenos_code = nil %}

From b5cd532435c57f4b87734954fdd8c95dd196692f Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Mon, 6 Jul 2020 15:10:35 +0200
Subject: [PATCH 06/12] Update code.scss

Produces sensible (but not perfect) results from different kinds of highlight markup.
The CSS code needs a major refactoring to eliminate duplication and superflous lines.
---
 _sass/code.scss | 56 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index 72fa336..2423dfa 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -11,6 +11,34 @@ code {
   border-radius: $border-radius;
 }
 
+// Content structure for highlighted code blocks using fences or Liquid
+//
+// ```[LANG]...```, no kramdown line_numbers:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//
+// ```[LANG]...```, kramdown line_numbers = true:
+//   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
+//   > div.table-wrapper > table.rouge-table > tbody > tr 
+//   > td.rouge-gutter.gl > pre.lineno
+//   | td.rouge-code > pre
+//
+// {% highlight LANG %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//
+// {% highlight LANG linenos %}...{% endhighlight %}:
+//   figure.highlight > pre > code.language-LANG
+//   > div.table-wrapper > table.rouge-table > tbody > tr
+//   > td.gutter.gl > pre.lineno
+//   | td.code > pre
+//
+// fix_linenos removes the outermost pre when it encloses table.rouge-table
+//
+// See docs/index-test.md for some tests.
+// 
+// No kramdown line_numbers: fences and Liquid highlighting look the same.
+// Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
+
+
 pre.highlight,
 figure.highlight {
   padding: $sp-3;
@@ -27,12 +55,11 @@ 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 {
+figure.highlight,
+div.highlight {
   padding: 0;
   margin-top: 0;
   margin-bottom: $sp-3;
@@ -47,11 +74,12 @@ figure.highlight {
   }
 }
 
-// With linenos:
-
-figure.highlight > pre > code,
-figure.highlight > code {
+// With linenos or kramdown line_numbers option:
 
+figure.highlight > pre > code, // {% highlight linenos %}
+figure.highlight > code,       // with fix_linenos
+div.highlight > pre > code,    // ```...```
+div.highlight > code {         // with fix_linenos
   td,
   td > pre {
     @include fs-2;
@@ -62,8 +90,8 @@ figure.highlight > code {
     border-left: 0;
   }
 
-  td.gutter {
-    padding-right: 1rem;
+  td.gl {
+    padding-right: $sp-3;
   }
 
   pre {
@@ -79,7 +107,9 @@ figure.highlight > code {
 
 // Jekyll 4.1.1: figure.highlight > pre > code > div > table > ...
 
-figure.highlight > pre > code .table-wrapper {
+figure.highlight > pre > code .table-wrapper,
+div.highlight > pre > code .table-wrapper,
+ {
   padding: 0;
   margin-bottom: 0;
   border: 0;
@@ -88,8 +118,12 @@ figure.highlight > pre > code .table-wrapper {
 
 // Using fix_linenos: figure.highlight > code > div > table > ...
 
-figure.highlight > code .table-wrapper {
+figure.highlight > code .table-wrapper,
+div.highlight > code .table-wrapper {
   padding: $sp-3;
+  margin-bottom: 0;
+  border: 0;
+  box-shadow: none;
 }
 
 .highlighter-rouge {

From 49ef043ebbe839858689de44428d2bf70bd02a53 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Mon, 6 Jul 2020 17:20:55 +0200
Subject: [PATCH 07/12] Update code.scss

Removed some comments and layout
---
 _sass/code.scss | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index 2423dfa..864c9b0 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -18,7 +18,7 @@ code {
 //
 // ```[LANG]...```, kramdown line_numbers = true:
 //   div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code
-//   > div.table-wrapper > table.rouge-table > tbody > tr 
+//   > div.table-wrapper > table.rouge-table > tbody > tr
 //   > td.rouge-gutter.gl > pre.lineno
 //   | td.rouge-code > pre
 //
@@ -34,11 +34,10 @@ code {
 // fix_linenos removes the outermost pre when it encloses table.rouge-table
 //
 // See docs/index-test.md for some tests.
-// 
+//
 // No kramdown line_numbers: fences and Liquid highlighting look the same.
 // Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
 
-
 pre.highlight,
 figure.highlight {
   padding: $sp-3;
@@ -76,10 +75,10 @@ div.highlight {
 
 // With linenos or kramdown line_numbers option:
 
-figure.highlight > pre > code, // {% highlight linenos %}
-figure.highlight > code,       // with fix_linenos
-div.highlight > pre > code,    // ```...```
-div.highlight > code {         // with fix_linenos
+figure.highlight > pre > code,
+figure.highlight > code,
+div.highlight > pre > code,
+div.highlight > code {
   td,
   td > pre {
     @include fs-2;
@@ -108,8 +107,7 @@ div.highlight > code {         // with fix_linenos
 // Jekyll 4.1.1: figure.highlight > pre > code > div > table > ...
 
 figure.highlight > pre > code .table-wrapper,
-div.highlight > pre > code .table-wrapper,
- {
+div.highlight > pre > code .table-wrapper {
   padding: 0;
   margin-bottom: 0;
   border: 0;

From 61053f677b7e9808fb14ee851d28a89361980f55 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Tue, 7 Jul 2020 19:34:35 +0200
Subject: [PATCH 08/12] Major refactoring

The additions to `_config.yml` go together with the changes to `code.scss`,
to facilitate adjusttments by users. See `docs/linenos-test` for the details.
The CSS code has been significantly refactored and simplified,
and seems to produce sensible results (at least on Safari and Firefox).
---
 _config.yml          |   7 +++
 _sass/code.scss      | 100 ++++++++++++++++---------------------------
 docs/linenos-test.md |  75 ++++++++++++++++++++++++++++++--
 3 files changed, 115 insertions(+), 67 deletions(-)

diff --git a/_config.yml b/_config.yml
index 20bf8a1..aca049e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -99,6 +99,11 @@ ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (t
 plugins:
   - jekyll-seo-tag
 
+kramdown:
+  syntax_highlighter_opts:
+    block:
+      line_numbers: false
+
 compress_html:
   clippings: all
   comments: all
@@ -106,3 +111,5 @@ compress_html:
   startings: []
   blanklines: false
   profile: false
+  # ignore:
+  #   envs: all
diff --git a/_sass/code.scss b/_sass/code.scss
index 864c9b0..4836a1e 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -38,55 +38,58 @@ code {
 // No kramdown line_numbers: fences and Liquid highlighting look the same.
 // Kramdown line_numbers = true: fences have a wider gutter than with Liquid?
 
-pre.highlight,
-figure.highlight {
+// ```[LANG]...```
+div.highlighter-rouge {
   padding: $sp-3;
   margin-top: 0;
-  margin-bottom: 0;
-  background-color: $code-background-color;
-  border-radius: $border-radius;
-  -webkit-overflow-scrolling: touch;
-
-  code {
-    padding: 0;
-    border: 0;
-  }
-}
-
-// Using Liquid tags for highlighting, optionally with linenos
-
-// Without linenos: figure.highlight > pre > code > div > span*
-
-figure.highlight,
-div.highlight {
-  padding: 0;
-  margin-top: 0;
   margin-bottom: $sp-3;
   background-color: $code-background-color;
   border-radius: $border-radius;
+  box-shadow: none;
   -webkit-overflow-scrolling: touch;
 
-  pre {
-    padding: $sp-3;
-    margin-top: 0;
-    margin-bottom: 0;
+  div.highlight,
+  pre.highlight,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
   }
 }
 
-// With linenos or kramdown line_numbers option:
+// {% highlight LANG [linenos] %}...{% endhighlight %}:
+figure.highlight {
+  padding: $sp-3;
+  margin-top: 0;
+  margin-bottom: $sp-3;
+  background-color: $code-background-color;
+  border-radius: $border-radius;
+  box-shadow: none;
+  -webkit-overflow-scrolling: touch;
 
-figure.highlight > pre > code,
-figure.highlight > code,
-div.highlight > pre > code,
-div.highlight > code {
-  td,
+  pre,
+  code {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+// ```[LANG]...```, kramdown line_numbers = true,
+// {% highlight LANG linenos %}...{% endhighlight %}:
+.highlight .table-wrapper {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+
+  tr > td,
   td > pre {
     @include fs-2;
     min-width: 0;
     padding: 0;
+    border: 0;
     background-color: $code-background-color;
-    border-bottom: 0;
-    border-left: 0;
   }
 
   td.gl {
@@ -94,38 +97,9 @@ div.highlight > code {
   }
 
   pre {
-    margin-top: 0;
+    margin: 0;
     line-height: 2;
   }
-
-  tbody > tr > td {
-    padding-bottom: 0;
-    border-bottom: 0;
-  }
-}
-
-// Jekyll 4.1.1: figure.highlight > pre > code > div > table > ...
-
-figure.highlight > pre > code .table-wrapper,
-div.highlight > pre > code .table-wrapper {
-  padding: 0;
-  margin-bottom: 0;
-  border: 0;
-  box-shadow: none;
-}
-
-// Using fix_linenos: figure.highlight > code > div > table > ...
-
-figure.highlight > code .table-wrapper,
-div.highlight > code .table-wrapper {
-  padding: $sp-3;
-  margin-bottom: 0;
-  border: 0;
-  box-shadow: none;
-}
-
-.highlighter-rouge {
-  margin-bottom: $sp-3;
 }
 
 .highlight .c {
diff --git a/docs/linenos-test.md b/docs/linenos-test.md
index 48e9603..8d6962e 100644
--- a/docs/linenos-test.md
+++ b/docs/linenos-test.md
@@ -4,17 +4,80 @@ title: Markdown line number test
 nav_order: 999
 ---
 
-```
-Some unknown code in fences
-```
+# Configuration options
+
+The default settings for HTML compression are incompatible with the HTML
+produced by Jekyll (4.1.1 or earlier) for line numbers from highlighted code
+-- both when using Kramdown code fences and when using Liquid highlight tags.
+
+To avoid non-conforming HTML and unsatisfactory layout, HTML compression
+can be turned off by using the following configuration option:
 
-Some of the code examples below require the following setting in `_config.yml`:
 ```yaml
 compress_html:
   ignore:
     envs: all
 ```
 
+When using Kramdown code fences, line numbers are turned on globally by the
+following configuration option:
+
+```yaml
+kramdown:
+  syntax_highlighter_opts:
+    block:
+      line_numbers: false
+```
+
+Line numbers can then be suppressed locally using Liquid tags (_without_ the
+`linenos` option) instead of fences:
+
+```
+{% raw %}{% highlight some_language %}
+Some code
+{% endhighlight %}{% endraw %}
+```
+
+# Workarounds
+
+To use HTML compression together with line numbers, all highlighted code
+needs to be wrapped using one of the following workarounds.
+(The variable name `some_var` can be changed to avoid clashes; it can also
+be replaced by `code` -- but note that `code=code` cannot be removed).
+
+## Code fences
+
+````
+{% raw %}{% capture some_var %}
+```some_language
+Some code
+```
+{% endcapture %}
+{% assign some_var = some_var | markdownify %}
+{% include fix_linenos.html code=some_var %}{% endraw %}
+````
+
+## Liquid highlighting
+
+```
+{% raw %}{% capture some_var %}
+{% highlight some_language linenos %}
+Some code
+{% endhighlight %}
+{% endcapture %}
+{% include fix_linenos.html code=some_var %}{% endraw %}
+```
+
+_Credit:_ The original version of the above workaround was suggested by
+Dmitry Hrabrov at
+<https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901>.
+
+# Examples
+
+```
+Some unknown code in fences
+```
+
 ```js
 // Javascript code with syntax highlighting in fences
 var fun = function lang(l) {
@@ -48,6 +111,10 @@ end
 {% include fix_linenos.html code=code %}
 {% assign code = nil %}
 
+With the default configuration options, the following example illustrates
+the incorrect formatting arising from the incompatibility of HTML compression
+and the non-conforming HTML produced by Jekyll for line numbers:
+
 {% highlight ruby linenos %}
 # Ruby code with syntax highlighting and unfixed line numbers using Liquid
 GitHubPages::Dependencies.gems.each do |gem, version|

From 029ba12559d8f55ca4a4beca44cd68120299ae4b Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Tue, 7 Jul 2020 19:38:46 +0200
Subject: [PATCH 09/12] Update code.scss

---
 _sass/code.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index 4836a1e..a28addd 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -88,8 +88,8 @@ figure.highlight {
     @include fs-2;
     min-width: 0;
     padding: 0;
-    border: 0;
     background-color: $code-background-color;
+    border: 0;
   }
 
   td.gl {

From 8a9a8a345d03883ed978eacedd5bdd651e1505b9 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Tue, 7 Jul 2020 19:54:31 +0200
Subject: [PATCH 10/12] Optimisations

Optimised CSS selectors.
Changed markup in `linenos-test` to inhibit line numbers appearing in YAML examples when testing code fences.
---
 _sass/code.scss      |  4 ++--
 docs/linenos-test.md | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index a28addd..5fd7df9 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -83,8 +83,8 @@ figure.highlight {
   border: 0;
   box-shadow: none;
 
-  tr > td,
-  td > pre {
+  td,
+  pre {
     @include fs-2;
     min-width: 0;
     padding: 0;
diff --git a/docs/linenos-test.md b/docs/linenos-test.md
index 8d6962e..cdb19a9 100644
--- a/docs/linenos-test.md
+++ b/docs/linenos-test.md
@@ -13,30 +13,30 @@ produced by Jekyll (4.1.1 or earlier) for line numbers from highlighted code
 To avoid non-conforming HTML and unsatisfactory layout, HTML compression
 can be turned off by using the following configuration option:
 
-```yaml
+{% highlight yaml %}
 compress_html:
   ignore:
     envs: all
-```
+{% endhighlight %}
 
 When using Kramdown code fences, line numbers are turned on globally by the
 following configuration option:
 
-```yaml
+{% highlight yaml %}
 kramdown:
   syntax_highlighter_opts:
     block:
       line_numbers: false
-```
+{% endhighlight %}
 
 Line numbers can then be suppressed locally using Liquid tags (_without_ the
 `linenos` option) instead of fences:
 
-```
+{% highlight yaml %}
 {% raw %}{% highlight some_language %}
 Some code
 {% endhighlight %}{% endraw %}
-```
+{% endhighlight %}
 
 # Workarounds
 
@@ -47,7 +47,7 @@ be replaced by `code` -- but note that `code=code` cannot be removed).
 
 ## Code fences
 
-````
+{% highlight default %}
 {% raw %}{% capture some_var %}
 ```some_language
 Some code
@@ -55,18 +55,18 @@ Some code
 {% endcapture %}
 {% assign some_var = some_var | markdownify %}
 {% include fix_linenos.html code=some_var %}{% endraw %}
-````
+{% endhighlight %}
 
 ## Liquid highlighting
 
-```
+{% highlight default %}
 {% raw %}{% capture some_var %}
 {% highlight some_language linenos %}
 Some code
 {% endhighlight %}
 {% endcapture %}
 {% include fix_linenos.html code=some_var %}{% endraw %}
-```
+{% endhighlight %}
 
 _Credit:_ The original version of the above workaround was suggested by
 Dmitry Hrabrov at

From a855af3db3aa828817b69615e92c598825eb51d8 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Tue, 7 Jul 2020 19:59:13 +0200
Subject: [PATCH 11/12] Update code.scss

---
 _sass/code.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/_sass/code.scss b/_sass/code.scss
index 5fd7df9..ead2c5f 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -57,7 +57,8 @@ div.highlighter-rouge {
   }
 }
 
-// {% highlight LANG [linenos] %}...{% endhighlight %}:
+// {% highlight LANG %}...{% endhighlight %},
+// {% highlight LANG linenos %}...{% endhighlight %}:
 figure.highlight {
   padding: $sp-3;
   margin-top: 0;

From 74da664c0a6eb84bccaa43eecda7f486c596cea3 Mon Sep 17 00:00:00 2001
From: PLanCompS <18308236+pdmosses@users.noreply.github.com>
Date: Mon, 10 Aug 2020 16:53:48 +0200
Subject: [PATCH 12/12] Linenos test moved to UI Components as a child of Code

---
 docs/ui-components/code.md                         | 1 +
 docs/{linenos-test.md => ui-components/linenos.md} | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)
 rename docs/{linenos-test.md => ui-components/linenos.md} (97%)

diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md
index e53a90d..b8136a3 100644
--- a/docs/ui-components/code.md
+++ b/docs/ui-components/code.md
@@ -2,6 +2,7 @@
 layout: default
 title: Code
 parent: UI Components
+has_children: true
 nav_order: 6
 ---
 
diff --git a/docs/linenos-test.md b/docs/ui-components/linenos.md
similarity index 97%
rename from docs/linenos-test.md
rename to docs/ui-components/linenos.md
index cdb19a9..b13e6c9 100644
--- a/docs/linenos-test.md
+++ b/docs/ui-components/linenos.md
@@ -1,7 +1,8 @@
 ---
 layout: default
-title: Markdown line number test
-nav_order: 999
+title: Code with line numbers
+parent: Code
+grand_parent: UI Components
 ---
 
 # Configuration options