Cannot mix diff and diff-lang in one app

[marcoow]

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:

eleventy-plugin-syntaxhighlight/src/PrismLoader.js

Lines 30 to 34 in ac92151

	if(!Prism.languages.diff) {
	PrismLoader("diff");
	// Bundled Plugin
	require("prismjs/plugins/diff-highlight/prism-diff-highlight");
	}

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]

Shipping with v5.0.0