Code blocks formatting issue

[daz079]

Operating system

MacOS 14.1.2

Eleventy

2.0.1

Describe the bug

I have recently updated Eleventy to version 2.0.1 and I used the handy update tool to accomplish this.

I then did some basic housekeeping and updated Node, NPM and all dependencies.

At first everything seemed fine, but then as I checked a different page with code blocks I noticed a weird issue that wasn't there the day before.

I write code blocks in VSCode, I then paste in to the CMS (Decap) and everything is fine there (editor and preview).

Some of my code blocks have comments (single line and multi-line), all of them tend to have empty lines.

When I visited a page what I saw was the PrismJS span tags within my code blocks (this only really applied to JavaScript files, but it did make CSS files look a bit unsightly by adding additional spaces between every line. HTML blocks render as normal.

Just because I'm rubbish at explaining things, here is what renders on the site:

When the actual code used to render like so:

mainNav.innerHTML = `<button class="nav__btn" aria-expanded="false" aria-controls="navList">Menu</button> ${mainNavContent}`;

The issue is mainly where I use single backticks within a triple backtick block, in that that is where the unwanted Prism span tags are rendered within the code block.

The rest of the file behaves like the CSS file, in that it renders additional new lines between every line I wrote, comments and code.

I have managed to figure out a sort of workaround, but it isn't great. If I remove all empty lines, it displays as expected and I no longer see the span tags within template literals. It's not ideal for separating functions or even CSS declarations as I can no longer have empty lines.

Also, I should probably add that the actual MarkDown files appear fine, the issue appears after conversion to HTML. I have the Eleventy syntax highlighter correctly imported and called, I haven't changed that. This issue only appeared after updating, although I do concede I updated other packages before I noticed.

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See an error

Expected behavior

No response

Reproduction URL

No response

Screenshots

No response

[zachleat]

can you paste the upstream template that renders this? or the relevant code that eleventy sees?

[zachleat]

This is an automated message to let you know that this issue requires additional input from the original poster 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.

Do not let the issue’s closing deter you. After you’ve supplied the required information, the issue will be reopened. Thanks!