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 +``. 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 +`
`. + +{%- endcomment %} + +{% if fix_linenos_code contains '
' %} + {% assign fix_linenos_code = fix_linenos_code | replace: "
", "" %} +{% 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.