Comments (8)
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
from eleventy-plugin-syntaxhighlight.
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"><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"><<</span> <span class="token string">"Hey!"</span> <span class="token operator"><<</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"><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"><<</span> <span class="token string">"Hey!"</span> <span class="token operator"><<</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.
from eleventy-plugin-syntaxhighlight.
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 %}
from eleventy-plugin-syntaxhighlight.
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 %}
from eleventy-plugin-syntaxhighlight.
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>
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>
from eleventy-plugin-syntaxhighlight.
Temporary fix would be to remove <br>
after every <span>
using CSS
style.css
span + br{content:' ';}
from eleventy-plugin-syntaxhighlight.
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.
from eleventy-plugin-syntaxhighlight.
@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?
from eleventy-plugin-syntaxhighlight.
Related Issues (20)
- Highlight specific keywords in the codeblock HOT 1
- Add filename to code block HOT 2
- Is there a way to add Prism plugins? HOT 2
- Highlighting code with CRLF end-of-lines results in double line feeds in output when using Nunjucks HOT 4
- Switch from peerDependencies to 11ty.compatibility
- Is there a copy button? HOT 1
- Added and removed lines get no special styling HOT 1
- Providing a default language for fenced code blocks HOT 8
- Add prismjs alias for `nunjucks` mapped to `jinja2` HOT 2
- Unsupported Languages cause Build Failures HOT 3
- Inline code support HOT 1
- Compatibility with markdown-it-attrs HOT 1
- Upgrade to use Torchlight? HOT 6
- Using the diff function, output is not escaped. HOT 3
- Cannot mix `diff` and `diff-lang` in one app HOT 1
- Feature request: config to add wrapping div HOT 2
- Syntax highlighting can fail if another plugin uses Prism too
- diff-javascript code block generates invalid HTML HOT 1
- Remove character wrap feature.
- Change default `lineSeparator` option to `\n` instead of `<br>` HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
elements between lines, effectively causing double line spacing
from eleventy-plugin-syntaxhighlight.