search

11ty / eleventy-plugin-syntaxhighlight

A pack of Eleventy plugins for syntax highlighting in Markdown, Liquid, and Nunjucks templates.
https://www.11ty.dev/docs/plugins/syntaxhighlight/
MIT License
130 stars 32 forks source link

Code blocks not maintaining preformatted whitespace #41

Closed goodguyry closed 3 years ago

goodguyry commented 3 years ago

I noticed the code blocks on my site are missing the expected whitespace. When I checked the docs I noticed the 11ty site is suffering from the same issue.

I hadn't noticed this until recently; I know for sure code blocks were displaying as expected at some point (as they were in the 11ty docs). The only recent change I've made that I can think might be related is updating to Eleventy version 0.11.1.

I can get the expected whitespace in the output by fencing with backticks. However, if I add the language identifier to the fenced block the whitespace goes away.

```scss # highlighting, but with incorrect whitespace
``` # correct whitespace, but obviously no syntax highlighting

In addition, {% highlight scss %} gives me the same result as backticks + language identifier.

{% highlight scss %} # highlighting, but with incorrect whitespace

Thanks. Let me know if I can provide any additional details.

romannurik commented 3 years ago

I'm running into this too in markdown, specifically that newlines are being removed. While I'm not sure why the <br>s are being removed, this seemed to work around the problem:

eleventyConfig.addPlugin(syntaxHighlight, {
  lineSeparator: '<br>\n',
  init: ...
});
goodguyry commented 3 years ago

This is great, thanks @romannurik! That gets the line breaks back.

With this in place I'm noticing Prism isn't highlighting some code blocks. I get a (well-formatted) text string within the <code> element, rather than Prism's <span>s. The only language for which I'm seeing the highlighting spans is HMTL.

I'll try picking away at this when I find the time; it feels less urgent to me with the line breaks restored.

zachleat commented 3 years ago

I’m guessing this is a duplicate of https://github.com/11ty/11ty-website/issues/877 (a recent regression in the Axe Chrome extension)

You can verify by testing in an incognito window

zachleat commented 3 years ago

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!