just-the-docs/_includes/fix_linenos.html
Matt Wang fd689b47e0
docs: fix misleading docs on code with line numbers (#1349)
Closes #1306.

Co-authored-by: Peter Mosses <18308236+pdmosses@users.noreply.github.com>
2023-11-15 11:45:14 -08:00

74 lines
2.5 KiB
HTML

{%- comment -%}
This file was previously used to "fix" the HTML produced by Jekyll for
highlighted code with line numbers. While it often resolves layout issues
from the missing HTML tags, it still generates invalid HTML (by placing
a `<table>` element within a `<code>` block). As such, we no longer
recommend using this workaround. For more information, see the
"Code snippets with line numbers" docs page:
https://just-the-docs.com/docs/ui-components/code/line-numbers/
(or, docs/ui-components/line-nos.md/)
The next portion of this file, including the comments and the workaround,
are preserved for backwards comptability.
ACKNOWLEDGEMENTS
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 (OLD)
The HTML produced by Rouge highlighting with line numbers is of the form
`code table`. Jekyll 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.
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
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 code=some_var %}
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">`.
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 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 %}