We ran into a problem where we couldn't get nice diff rendering for e.g. diff-js or any other language (see mainmatter/mainmatter.com#1955). 11ty would always only render a green/red diff but not apply any highlighting specific to the language.
After some debugging I realized the root cause is this:
So instead of checking for the presence of the diff language, I think you want to specifically check for whether the diff-highlight plugin has been loaded or not.
A workaround of course is to never use ```diff and always use ```diff-js etc.
We ran into a problem where we couldn't get nice diff rendering for e.g.
diff-js
or any other language (see mainmatter/mainmatter.com#1955). 11ty would always only render a green/red diff but not apply any highlighting specific to the language.After some debugging I realized the root cause is this:
https://github.com/11ty/eleventy-plugin-syntaxhighlight/blob/ac92151c42996faef19650f34f54a77e4ac210f2/src/PrismLoader.js#L30-L34
If the
diff
language is already present, thediff-highlight
plugin isn't loaded. That means that if you have a codeblockand then later another one
the second one doesn't get highlighted correctly as the
diff-highlight
plugin isn't loaded and thus cannot register its hooks which it needs to apply the language-specific highlighting on top of the diff highlighting (see https://github.com/PrismJS/prism/blob/master/plugins/diff-highlight/prism-diff-highlight.js#L34).So instead of checking for the presence of the
diff
language, I think you want to specifically check for whether thediff-highlight
plugin has been loaded or not.A workaround of course is to never use
```diff
and always use```diff-js
etc.