Syntax highlighting adds <br> elements between lines, effectively causing double line spacing

[mustafaoral]

The lines.join("<br>") call in the line below causes the resulting markup to have <br> elements joining highlighted lines.

https://github.com/11ty/eleventy-plugin-syntaxhighlight/blob/6c31de7d7abbd42e038420d8ec800cc3f70f3e1c/src/HighlightPairedShortcode.js#L23

<pre class="language-csharp">
    <code class="language-csharp">
        <span class="highlight-line">
            <span class="token keyword">public</span>
            <span class="token keyword">string</span>
            <span class="token function">GetEvenOdd</span>
            <span class="token punctuation">(</span>
            <span class="token keyword">int</span> i
            <span class="token punctuation">)</span>
        </span>
        <br>
        <span class="highlight-line">
            <span class="token punctuation">{</span>
        </span>
        <br>
        <span class="highlight-line">
            <span class="token keyword">if</span>
            <span class="token punctuation">(</span>i 
            <span class="token operator">%</span>
            <span class="token number">2</span>
            <span class="token operator">==</span>
            <span class="token number">0</span>
            <span class="token punctuation">)</span>
        </span>
        <br>
        <span class="highlight-line">
            <span class="token punctuation">{</span>
        </span>
        <br>
        <span class="highlight-line">
            <span class="token keyword">return</span>
            <span class="token string">"even"</span>
            <span class="token punctuation">;</span>
        </span>
        <br>
        <span class="highlight-line">
            <span class="token punctuation">}</span>
        </span>
        <br>
        <span class="highlight-line"></span>
        <br>
        <span class="highlight-line">
            <span class="token keyword">return</span>
            <span class="token string">"odd"</span>
            <span class="token punctuation">;</span>
        </span>
        <br>
        <span class="highlight-line">
            <span class="token punctuation">}</span>
        </span>
    </code>
</pre>

This causes double line spacing and doesn't look right. Instead of this

public string GetEvenOdd(int i)
{
    if (i % 2 == 0)
    {
        return "even";
    }

    return "odd";
}

You get this

public string GetEvenOdd(int i)

{

    if (i % 2 == 0)

    {

        return "even";

    }

    return "odd";

}

As rendered on the page

I'm using eleventy 0.8.3, eleventy-plugin-syntaxhighlight 2.0.3 with nunjucks templates.

[zachleat]

I believe this was visited in #8?

You may want to try the v3.0 of this plugin, it may fix your issue as it bypasses the line highlight stuff altogether by default. See https://github.com/11ty/eleventy-plugin-syntaxhighlight/releases/tag/v3.0.0

[pseigo]

I experience similar behaviour to this on v3.0.1 with Nunjucks syntax. If the file has unix LF line endings, the code blocks are rendered as expected. If it has Windows CRLF line endings, I get the extra newlines.

I use Windows 10 as my main OS and OpenSUSE in a VM which is how I came across this. The screenshots were captured in Firefox on Windows.

My environment

I should probably mention what else I'm using.

// package.json
"dependencies": {
  "@11ty/eleventy": "^0.10.0",
  "@11ty/eleventy-navigation": "^0.1.5",
  "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
  "include-media": "^1.4.9",
  "modern-normalize": "^0.6.0",
  "npm-run-all": "^4.1.5",
  "sass": "^1.26.3",
  "sass-lint": "^1.13.1",
  "autoprefixer": "^9.8.0",
  "postcss-cli": "^7.1.1"
}

// .eleventy.js
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const eleventyNavigation = require("@11ty/eleventy-navigation");
const cleanCss = require("clean-css");
const fs = require("fs"); // for 404 pages in `eleventy --serve`

Input markup

Here's the input in a Markdown file:

{%- highlight cpp -%}
#include <iostream>

int main()
{
    std::cout << "Hey!" << std::endl;
}
{%- endhighlight -%}

HTML diff

And this is a diff of my html output, before being LF and after being CRLF.

NOTE: I wrap my code blocks in <figure> so I thought I'd include it here.

-<figure class="full-width align-main"><pre class="language-cpp"><code class="language-cpp"><span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;iostream></span></span>
-<br>
-<br><span class="token keyword">int</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-<br><span class="token punctuation">{</span>
-<br>    std<span class="token operator">::</span>cout <span class="token operator">&lt;&lt;</span> <span class="token string">"Hey!"</span> <span class="token operator">&lt;&lt;</span> std<span class="token operator">::</span>endl<span class="token punctuation">;</span>
-<br><span class="token punctuation">}</span></code></pre></figure>
+<figure class="full-width align-main"><pre class="language-cpp"><code class="language-cpp"><span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;iostream></span></span><br><br><span class="token keyword">int</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span><br><span class="token punctuation">{</span><br>    std<span class="token operator">::</span>cout <span class="token operator">&lt;&lt;</span> <span class="token string">"Hey!"</span> <span class="token operator">&lt;&lt;</span> std<span class="token operator">::</span>endl<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre></figure>

Rendered difference

LF.

CRLF.

[smth]

I'm getting this with v3.0.1 too. Using Windows and WSL, and invoking from a Nunjucks file something like:

{% highlight "html" %}
{% include 'file.html' %}
{% endhighlight %}

[CarlVitasa]

I have the same issue with v3.0.1 in a Nunjucks file

{% highlight "js" %}
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}
{% endhighlight %}

[CarlVitasa]

When I compared the source code of the Markdown vs Nunjucks file I found that when using {% highlight "js" %} the <br>'s are in a new line. Everything should be fixed if the Syntax Highlighting just concatenated the conversion into a single line, just like how it currently works in the Markdown conversion.

Markdown

```js⠀
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}
```⠀

Index.md Source Code:

<pre class="language-js"><code class="language-js"><span class="token comment">// Javascript code with syntax highlighting.</span><br><span class="token keyword">var</span> <span class="token function-variable function">fun</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">lang</span><span class="token punctuation">(</span><span class="token parameter">l</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>  dateformat<span class="token punctuation">.</span>i18n <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./lang/'</span> <span class="token operator">+</span> l<span class="token punctuation">)</span><br>  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>

Output:

---

Nunjucks

{% highlight "js" %}
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}
{% endhighlight %}

Index.njk Source Code:

<pre class="language-js"><code class="language-js"><span class="token comment">// Javascript code with syntax highlighting.</span>
<br><span class="token keyword">var</span> <span class="token function-variable function">fun</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">lang</span><span class="token punctuation">(</span><span class="token parameter">l</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<br>  dateformat<span class="token punctuation">.</span>i18n <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./lang/'</span> <span class="token operator">+</span> l<span class="token punctuation">)</span>
<br>  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<br><span class="token punctuation">}</span></code></pre>

Output:

[CarlVitasa]

Temporary fix would be to remove <br> after every <span> using CSS

style.css

span + br{content:' ';}

[zachleat]

Starting in v3.0.4 we’ll support a lineSeparator option to change the default from "<br>". You probably want to lineSeparator: "\n".

This will show up on https://www.11ty.dev/docs/plugins/syntaxhighlight/ after the website deploys.

[pseigo]

@zachleat iirc, I ran the same code on two different systems (Windows w/ CRLF and Linux w/ LF endings) where one worked as expected and the other produced double newlines. Seems like @smth experienced the same behaviour as I did on Windows.

Would it then not be a bug rather than an enhancement?