mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-26 21:12:23 -06:00
74 lines
2.5 KiB
HTML
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 %}
|