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

Cannot mix `diff` and `diff-lang` in one app #76

Closed marcoow closed 1 year ago

marcoow commented 1 year ago

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, the diff-highlight plugin isn't loaded. That means that if you have a codeblock

 ```diff
 + new line
 `` (GitHub doesn't render this properly with 3 `)

and then later another one

 ```diff-js
 + let val = 0:
 `` (GitHub doesn't render this properly with 3 `)

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 the diff-highlight plugin has been loaded or not.

A workaround of course is to never use ```diff and always use ```diff-js etc.

zachleat commented 1 year ago

Shipping with v5.0.0