[Feature Request] Diff and Language Highlights

[jd-solanki]

Is your feature request related to a problem? Please describe.

This is same as vuejs/vuepress#2704

That issue was for prism but VitePress uses shiki. Is it possible to achieve language highlight with diff language?

Describe the solution you'd like

na

Describe alternatives you've considered

na

Additional context

I use language highlighting for now instead of showing diff because without language highlight diff looks really bad. It takes some time for users to under what changes between two snippets but it's better highlighted.

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

It turns out shiki has support for this: shikijs/shiki#259. Will take some time but I think it can be integrated here. It might also simplify our highlightLines plugin.

[jd-solanki]

Glad to hear that ❤️

[brc-dd]

Okay, just tested this, gonna take back my words. That shiki support won't work for us. To support diffs with syntax highlighting, we'll need to highlight code without +, -, @@ and all that, so that syntax highlighter don't break. Then add bg to lines accordingly. This is a lot of work actually. Parsing the diff will be a challenge for sure. Also, GitHub too doesn't syntax highlights diffs. It adds the background colors though. But in our case too, we have that red/green thing, though with text color instead of background.

Consider using this for now:

```diff {2-4}
@@ -4,6 +4,5 @@
-    let foo = bar.baz([1, 2, 3]);
-    foo = foo + 1;
+    const foo = bar.baz([1, 2, 3]) + 1;
     console.log(`foo: ${foo}`);
```

It looks great even without the code being syntax highlighted:

I am closing this as not-planned. Might visit this later if there is enough demand. If someone from the community has a nice way of implementing this, then we may consider adding it officially.