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.

[sharavananpa]

I've been doing a little trial and error since yesterday and I don't fully understand how JS works with its IIFE etc. But I got the diff-{language} identifier working by just returning the diff loader from the Prism.languages object instead of using prismDiff variable (after loading the missing language of course).

Here's what I mean by that,

Also Prism's diff-highlight plugin adds this "before-sanity-check" hook that I presume gets executed whenever the highlight method is invoked. And this does the same thing as above anyway.

But here are some questions I have since I don't understand why things are done in a certain way.

1. Why use the prismDiff variable? It's always going to be undefined (or empty idk) since prism-diff.js is an IIFE that doesn't return anything. It just adds the diff loader into Prism.languages.

2. What is the point of storing the aliased keys into Prism.languages like Prism.languages[ fullLanguageName ]. I might be missing something that's not obvious here.

3. I think since PrismLoader returns undefined or an empty object it gets checked later in markdownSyntaxHighlightOptions.js and maybe more places. I'm not clear on this since I don't know if PrismDiff variable in PrismLoader will be undefined or an empty object. But I thought I'll just point this out incase it's helpful.

[zachleat]

Hmm, I think this might have been from #90?

Thank you for the PR @sharavananpa! Shipping with v5.0.2