[gatsby-remark-prismjs] `diff` with language / highlight

[stephencweiss]

Hi there!

Trying to understand a few things related to gatsby-remark-prismjs and how it may (or may not) differ from regular prismjs.

The prism site has an example of diff-highlighting and I'm trying to recreate that in my site (here's my post).

Github's preview is a good example of what I'm striving for:

On my site, however, I can't seem to figure out how to get highlights - whether language specific or not:

I've tried

```diff-javascript
```diff javascript

And several other variants, but to no avail.

Interestingly, diff-javascript results in some weird encoding (note the undefined values that get appended to the ends of lines):

My questions:

1. Does gatsby-remark-prismjs support multi-language (diff + javascript for example)?
2. Does gatsby-remark-prismjs support line-highlighting (with the green/red, not the standard highlighting)?

Thanks!

[sidharthachatterjee]

@stephencweiss Have you tried https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/#optional-add-line-highlighting-styles?

[stephencweiss]

@sidharthachatterjee Yes, I believe so.

Reading over my initial post, I may not have been totally clear in my original question. Let me try again.

I have highlighting configured on my site (see the screen shot below).

What I'm missing is what the CSS would look like for the diff language so that it's red for - lines and green + lines. Per Prism's site, this appears to be called diff-highlight.

For example, right now, my best solution is to manually highlight the diff rows which is not ideal for two reasons.

1. It's cumbersome (and I think it should be included in the prismjs plugin
2. It doesn't differentiate between new lines (+) and deleted ones (-)

For example, typing this:

regular diff
```diff
{
-    resolve: `old-plugin`,
+    resolve: `gatsby-remark-prismjs`,
    options: {
        inlineCodeMarker: '>',
    },
}
```

regular diff with (standard) highlighting
```diff
{
-    resolve: `old-plugin`, // highlight-line
+    resolve: `gatsby-remark-prismjs`, // highlight-line
    options: {
        inlineCodeMarker: '>',
    },
}
```

Looks like this in my rendering:

My understanding from reading the Prism docs is there should be a way to apply the class: class="language-diff-javascript diff-highlight".

This would:

1. Note that the languages are both diff and javascript
2. Highlight rows with the red/green automatically

Honestly though, the class I really want is just "language-diff diff-highlight

Thanks!

Below are how the different classes look per the Prism docs:

[stephencweiss]

Said another way:

1. Is diff-highlighting built into the remark-prism plugin?
2. If it is, is there a way to indicate within the code fence that you want to apply that style? Similar to how you add a title by saying:

```lang:title="my title"
  //code goes here
```

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[stephencweiss]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

Would love some help on this as I still haven't solved it :-/

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[jamessimone]

@stephencweiss did you ever figure out anything to address this?

[stephencweiss]

I did not. It’s on my list to switch over to mdx and some more standard styling to see if that helps, but haven’t had a chance to test it. Stephen Weiss | 651.233.6827

…

On Mar 12, 2020, 9:16 AM -0500, James Simone ***@***.***>, wrote: @stephencweiss did you ever figure out anything to address this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.