Major issue with syntax-highlight plugin for multi-line code blocks

[tannerdolby]

@zachleat Everything that is being highlighted by eleventy-plugin-syntaxhighlight on 11ty.dev has some issues with the styling.

Each of the multi-line code blocks are formatted into a single line. This issue is probably happening for everyone using the plugin, as I first noticed it on my own website.

Also, all of the <pre> tags have an extra space at the beginning of the class declaration like this (which I don't think matters but just wanted to note everything I saw)

<pre class=" language-html">

Screenshot of issue:

The above code snippets are supposed to be multi line but obviously they are not.

I tried to tweak the CSS in my prism.css file locally to get the multi-line format to come back but I'm still trying to figure out where exactly the problem is at.

[zachleat]

I had someone else mention this to me earlier this week but it worked fine with an incognito window, can you rule out an extension?

[Ryuno-Ki]

Looking at https://www.11ty.dev/docs/plugins/syntaxhighlight/ I cannot confirm:

[tannerdolby]

Yep your right! It's a chrome plugin that was causing the issue. After disabling axe - Web Accessibility Testing from my chrome extensions, the code blocks are formatted correctly!

That's odd that the axe plugin could have this much destructive behavior, but I guess just as Lighthouse audits are affected by browser plugins, the syntaxhighlight is too.

[tannerdolby]

@Ryuno-Ki You must not have any browser plugins enabled. Or if you do, could you list them? I'm curious.

[Ryuno-Ki]

Perhaps you should inform @dequelabs (e.g. https://github.com/dequelabs/axe-core) about this?

I've got plenty of addons in my setup. axe is not among them, though.

[tannerdolby]

Yeah, I think that would probably be best. I will submit an issue and inform @dequelabs of this.

[Ryuno-Ki]

Since you've asked:

[Ryuno-Ki]

Please close this issue, since the problem was not caused by 11ty :-)

[tannerdolby]

@Ryuno-Ki Closed! Thanks for your input.

[zachleat]

Appreciate the heads up though Tanner! I wasn't able to investigate to narrow it down to a specific extension so that is helpful 👍🏻👍🏻

[tannerdolby]

No problem Zach!

If I obtain any relevant information or details from the issue I open in axe-core, I will update you in case that info could be helpful.

[5t3ph]

Confirmed as aXe by myself and also @bjankord

Can be temp resolved per-user by updating your Chrome extension settings for Site Access to "on click" as shown in the screenshot:

[lonekorean]

Also confirmed, happens when I install "axe - Web Accessibility Testing".

@tannerdolby can you link the issue you opened? I can't seem to find it.

[tannerdolby]

@lonekorean This issue (#877) is the one I opened! It's now been closed since we have determined that the problematic browser plugin is aXe - Web Accessibility Testing

[lonekorean]

@tannerdolby oh sorry! I thought you had opened one in the axe-core repo: https://github.com/dequelabs/axe-core/issues

If not, maybe we should open one there? I'm happy to do it, but you have first dibs. :)

[tannerdolby]

Ah, yes. Thanks for the reminder. Here is the issue opened in dequelabs/axe-core dequelabs/axe-core/issues/2711

[zachleat]

Moved to eleventy-plugin-syntaxhighlight repo