Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unsupported diff-* highlighting #28

Closed
RReverser opened this issue Aug 10, 2020 · 6 comments
Closed

Unsupported diff-* highlighting #28

RReverser opened this issue Aug 10, 2020 · 6 comments
Assignees
Milestone

Comments

@RReverser
Copy link

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/[email protected]_@[email protected]/node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/PrismLoader.js:11:11)
...

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

@peterjcaulfield
Copy link

See #46

@RReverser
Copy link
Author

@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
Copy link

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

@zachleat zachleat added this to the v3.2.1 milestone Jan 20, 2022
@zachleat zachleat self-assigned this Jan 20, 2022
@zachleat
Copy link
Member

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
Copy link
Author

Amazing, thanks!

@davidpmccormick
Copy link

davidpmccormick commented Jan 12, 2023

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?

image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants