Chrome ignores br tags to make a new highlight line

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

Chrome ignores br tags to make a new highlight line #45

Closed jeremenichelli closed 3 years ago

jeremenichelli commented 3 years ago

Not an issue of the plugin itself, but I noticed that Chrome removes br tags from a resulting code tag which was highlighted. Here's the exact same page, first on FIrefox and then on Chrome:

Firefox

Captura de pantalla 2021-01-10 a la(s) 12 37 43

Chrome

Captura de pantalla 2021-01-10 a la(s) 12 38 08

This test page has no JavaScript or CSS.

Here's the reproduction case from above, if you want to run it locally:

test.zip

My advice here would be to move the default lineSeparator option to \n and fire a warning if the user sets it to <br> in the mean time, as the output of the package it's broken out of the box because of this.

If we decide this is the way we want to go I'm more than happy to create a PR.

jouni-kantola commented 3 years ago

@jeremenichelli Do you by any chance have the axe browser extension installed? See details in #43. Try a extension free browser tab.

jeremenichelli commented 3 years ago

Oh my, that was it, can't believe I missed that thing. I thought I switched off everything to isolated the test case. Thanks a lot for jumping in @jouni-kantola

jouni-kantola commented 3 years ago

Great! I had already changed my setup's newlines before the axe issue was found.

eleventyConfig.addPlugin(syntaxHighlightPlugin, {
  lineSeparator: "\n",
});

It works OK, but I'll change it back to default once https://github.com/dequelabs/axe-core/issues/2711 is closed. See below screenshots from Safari.

With \n newlines: $\n newlines$

With default newlines (looks as expected):

jeremenichelli commented 3 years ago

Yeah I pushed the same fix by the time I wrote this issue. Thanks again for the pointer, I'll follow that issue.