Simplified the use of fix_linenos

Now using an include parameter.
Enhanced to support Markdown with code fences.
This commit is contained in:
PLanCompS 2020-07-06 15:07:53 +02:00
parent fdaf5a276b
commit b73300595b
1 changed files with 50 additions and 18 deletions

View File

@ -1,33 +1,65 @@
{% comment -%} {%- comment -%}
Fixes the HTML for highlighted code with linenos. 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 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`. The HTML produced by Rouge highlighting with lie numbers is of the form
Jekyll (<= 4.1.1) always wraps the highlighted HTML with `pre`, which is `code table`. Jekyll (<= 4.1.1) always wraps the highlighted HTML
unnecessary and non-conforming, and leads to validation error reports. with `pre`. This wrapping is not only unnecessary, but also transforms
The fix removes the `pre` tags around `_code` whenever it contains the pattern the conforming HTML produced by Rouge to non-conforming HTML, which
`<table class="rouge-table">`. This change avoids validation errors, and results in HTML validation error reports.
allows the use of [Jekyll layout for compressing HTML](http://jch.penibelst.de),
which relies on `pre` tags not being nested.
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 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 The above does not work when `Some code` happens to contain the matched string
`<table class="rouge-table">`. `<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">' %} {% 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: '<pre class="highlight">', '<pre>' %}
{% assign fix_linenos_code = fix_linenos_code | replace: "</code></pre>", "</code>" %} {% assign fix_linenos_code = fix_linenos_code | replace: "<pre><code", "<code" %}
{% assign fix_linenos_code = fix_linenos_code | replace: "</code></pre>", "</code>" %}
{% endif %} {% endif %}
{{ fix_linenos_code }}
{% assign fix_linenos_code = nil %}