Support both language and diff highlighting

[ninofiliu]

Is there any way to support both language highlighting on top of diff highlighting?

This works (ie goodbye has a red background and hello has a green background)

```diff
- goodbye
+ hello
```

- goodbye
+ hello

This works (ie const is in red, a is in white, and 10 is in blue)

```js
const a = 10;
```

const a = 10;

But this doesn't (ie 10 is not in blue with a red background). I tried with diff&js, diffjs, diff-js, jsdiff, js-diff, js&diff, etc.

```diff&js
- const a = 10;
+ const a = 20;
```

- const a = 10;
+ const a = 20;

I know this can be done because we have both diff and language highlighting in pull requests already

but apparently there doesn't seem to be a way to do it in github-flavored markdown, am I right? Is it a feature that is being developed right now? If not, could I contribute to this repo to add this feature?

According to my research, it's not possible at the time, but perhaps I am missing something:

• Stack Overflow - Diff syntax highlighting in Github Markdown -> not possible
• Syntax Highlighting Combine diff and xxx -> not possible
• Supported languages -> no explicit mention of diff + xxx

[lildude]

Is there any way to support both language highlighting on top of diff highlighting?

No, and it's not really up to Linguist either. Inline rendering is handled by https://github.com/github/markup which in turn uses Linguist when necessary.

I can't comment on if this feature is being developed as I'm not part of that side of things, though I know that project is stagnant right now. I think your question may also fall into the issue already open there (I've not read it all 😁) github/markup#1440

[ninofiliu]

Thanks! The referred threads do not address diff+language in particular but I'll make do with the markup repo pointer you have me

[Alhadis]

I've been requesting this feature for years (including more recently), so don't hold your breath waiting on a change. I've actually seen this implemented on other markdown-powered sites (IIRC, it was either GitLab or BitBucket). The syntax looked like this:

```diff js
 let fileIcon = document.querySelector("li.file-entry > span.icon");
+fileIcon.classList.remove("icon-file-text");
 const disposable = addIconToElement(fileIcon, "/path/to/file.txt");
```

Currently, the closest we have are suggestion blocks, which actually diff highlighted code perfectly:

Source	Output
```suggestion ace_mode: pascal codemirror_mode: pascal codemirror_mime_type: text/x-pascal ```

So it's not out of the realm of possibility that GitHub already have this implemented somewhere… they just need to hook it up to whatever code's responsible for sprucing up fenced code-blocks. 😉

[mderazon]

The syntax you mentioned looks like the best option to me. However take into consideration that it can mess up formatters like Prettier, that currently know how to auto-format code inside the fenced code blocks in Markdown which is very handy. That inline diff syntax characters (+ / -) can mess it up.
So I guess not so simple...

Playground Link

Still, i'd rather have this feature and Prettier fail to auto format in this case than not having this feature at all!