Issues using diff- syntax

[unisys12]

I started using this plugin on my personal blog a few weeks ago and have been happy with it. But there seems to be some issues related to the use of the diff- sytanx that I discovered after upgrading to v5.0.1. I have spent a decent amount of time trying to sort out the root cause, but just haven't been able to nail it down, hence the issue submission. I also feel like this could very well be an issue with Prism and not the plugin itself. I just noticed a formatting issue as well, but that can wait for now. One problem at a time.

Config

import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";

export default function (eleventyConfig) {
  // Plugins
  eleventyConfig.addPlugin(syntaxHighlight, {
    templateFormats: ["md"],
  });
}

Diffing Issues

If diff- syntax is used in front of any language selection, syntax highlighting does not work. For either syntax highlighting or displaying differences.

ex: code block example from site

```diff-js
options: {
    responsive: true,
    plugins: {
        legend: {
            display: true,
        },
        title: {
            display: true,
            text: 'Blood Pressure Chart',
        },
+       tooltip: {
+           callbacks: {
+               footer: ((ctx) => {
+                   return bpdata[ctx[0].dataIndex].blood_pressure_status;
+               })
+           }
+       }
+   },
}

ex: screen shot of using diff-* syntax highlighting

Incomplete HTML Generation

When looking at the generated code, from 11ty in Dev Tools, this is the output of 11ty v3.1.0 & Plugin-Syntaxhighlight v5.0.1 (using PrismJS v1.30.0)

<pre class="language-diff-js">
    <code class="language-diff-js">
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                },
                title: {
                    display: true,
                    text: 'Blood Pressure Chart',
                },
        +       tooltip: {
        +           callbacks: {
        +               footer: ((ctx) =&gt; {
        +                   return bpdata[ctx[0].dataIndex].blood_pressure_status;
        +               })
        +           }
        +       }
        +   },
        }
    </code>
</pre>

Plaintext Line Highlighting Works

ex: screen shot of using diff on a code block and not specifying a language, as documented

Conclusion

And this is where I ran into troubling trying to find the root cause. From the research I have done, it seems the autoloader for PrismJS is responsible for managing the diff plugin in PrismJS. The PrismLoader was altered in the 11ty Syntax Highlight Plugin and PrismJS altered it's Autoloader in this commit.

Maybe this is a case of me not being able to see the forest for the tree's, but there honestly doesn't seem to be a smoking gun in any of the changes made to either project (this syntax highlighting plugin or PrismJS). Or, it could just be me being a Numpty Head. Either way, I would love a fresh pair of eyes (or fingers) on this.

If I am able to resolve this, before anyone can respond, I will update accordingly.