[Feature Request] Diff and Language Highlights

[loren138]

Feature request

I'd like to be able to use diff and language highlighting as provided by this official prism extension: https://prismjs.com/plugins/diff-highlight/

There was a recent PR which improved Prisms auto-loader so it properly recognizes the diff syntax which might be helpful in implementing this: https://github.com/PrismJS/prism/pull/2580/files

What problem does this feature solve?

Diffs can have diff and language specific highlighting

What does the proposed API look like?

Just like the prism docs I can use diff-javascript as the language to get diff syntax and javascript syntax highlighted. I can also use diff-javascript diff-highlight to get full line highlights and javascript highlighted.

How should this be implemented in your opinion?

Official support using the already coded prism plugin.

Are you willing to work on this yourself?

Yes

[ZinkLu]

I download prism's theme .css file to src/.vuepress/themes and import in index.styl ,

/**
 * Custom Styles here.
 *
 * ref：https://v1.vuepress.vuejs.org/config/#index-styl
 */

.home .hero img
  max-width 450px!important

@import "/themes/prism-darcula.css"

It works.

[loren138]

@ZinkLu Could you share the code you used in markdown as well?

I'm expecting a result like this where both the diff and js is highlighted:

@@ -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}`);

[ZinkLu]

sorry, I misunderstood your meaning and it's seems there is no way to use a diff highlighting with specify language.

[benatkin]

This would probably need an addition to the opening code fence. I suggest lang="<language>"

```diff lang="typescript"

For highlighting lines, which should parse, though maybe not be useful:

```diff{3-9} lang="typescript"

Docusaurus does this style of attribute for titles.

[Ishadijcks]

@loren138 Did you end up working on this?

[loren138]

@Ishadijcks The PR template suggests waiting for feature request approval before working on the code.

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Since this hasn't been labeled as approved, I haven't worked on it. I do have some time in the next week or two that I could code it, assuming a maintainer approves it.

[Ishadijcks]

This repo isn't actively maintained anymore, so it might be better to submit this as an issue for Vuepress2? https://github.com/vuepress/vuepress-next

[benatkin]

I want it for vitepress :)

[ulivz]

I think this is a reasonable feature request and should be introduced to 1.x.