Unsupported diff-* highlighting

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

Unsupported diff-* highlighting #28

Closed RReverser closed 2 years ago

RReverser commented 4 years ago

Prism allows convenient diff line highlighting with preservation of underlying syntax highlighting via a Diff Highlight plugin: https://prismjs.com/plugins/diff-highlight/

However, trying to use it via 11ty via e.g. ```diff-javascript tag currently fails with

`TemplateContentRenderError` was thrown
> "diff-javascript" is not a valid Prism.js language for eleventy-plugin-syntaxhighlight

`Error` was thrown:
    Error: "diff-javascript" is not a valid Prism.js language for eleventy-plugin-syntaxhighlight
        at module.exports (/mnt/c/src/web.dev/node_modules/.pnpm/@11ty/eleventy-plugin-syntaxhighlight@3.0.1_@11ty+eleventy@0.11.0/node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/PrismLoader.js:11:11)
...

Looks like this might require some special handling similarly to TypeScript tag?

peterjcaulfield commented 3 years ago

See https://github.com/11ty/eleventy-plugin-syntaxhighlight/issues/46

RReverser commented 3 years ago

@peterjcaulfield Right, I'm aware of that manual syntax, but that's different, and very hard to maintain for complex diffs. Whereas real diff syntax support can be applied to unifieddiffs copied from Git.

peterjcaulfield commented 3 years ago

Yep gotcha. It seems like there are issues with a number of Prism plugins when used in a Node env.

zachleat commented 2 years ago

Starting with now-available v3.2.1 of this plugin, you can use diff- on the prefix of your language and Eleventy will use the official Prism.js diff-highlight plugin. Look to https://www.11ty.dev/docs/plugins/syntaxhighlight/ soon for the official docs on this.

RReverser commented 2 years ago

Amazing, thanks!

davidpmccormick commented 1 year ago

With the following in my .md file

```diff-js function test(a) { + const b = a + 1; const anotherThingThatIWantToBeHighlighted = 'nope'; - return b; } ```

I end up with this (only the +/- lines have been tokenized). Should this work now and/or am I missing something?

edit: on further inspection, I think it looks like tokenization will work throughout the block (even for unchanged lines) as long as the first line begins with a + or a -. Is this a known limitation?

edit some more: think I'm talking nonsense – seems like the amount of indentation is important, and I hadn't indented certain lines by the right amount. Please ignore me