feat(gatsby-remark-prismjs): Expose Full Line-Length Diff Highlighting #30939

jon-sully · 2021-04-19T17:50:30Z

Description

@stephencweiss puts the issue fairly succinctly in this comment and the next

This PR aims to fix the issue of not only supporting diff languages but also supporting the last step of adding the diff-highlight class to the code blocks which, along with Prisms stylesheet, will take the best-supported diff-viewing-experience currently available:

To a cleaner, full line-length highlighted alternative:

Documentation

Updated the README for the newly exposed configuration open. I defaulted it to false although I don't think there's any backwards compatibility immediately broken if set to true (without adding the stylesheet to gatsby-browser, the resulting visual is the same as current)

Related Issues

Fixes #20630

Enabled a config param to the remark-prism plugin that allows Diff code blocks to have the entire diff'd line be highlighted

…hlights-configuration

stephencweiss · 2021-04-20T12:16:45Z

packages/gatsby-remark-prismjs/README.md

@@ -392,12 +399,28 @@ unless explicitly overridden by the `promptUser` and `promptHost` options in the

 ### Diff code blocks

-You can specify language for `diff` code blocks by using `diff-[language]` to enable syntax highlighting in diffs:
+You can specify language for `diff` code blocks by using `diff-[language]` to enable syntax highlighting in diffs. Canonically, when writing code _diffs_, the code should be indented by two characters. If the code is being changed, the first character should be a `+`, `-`, or `!` otherwise left a space. The second character should always be a space. Git-style file-location coordinates need not be indented.


You and me both! I Knew the + - but Prism implements ! — not sure if that's a Prism specific thing, and depending on your Prism theme it can be pretty subtle (not exactly the 'exclamation mark' kind of effect I'd hope for) but it is there so I figured I should call it out 😀

stephencweiss · 2021-04-20T12:18:46Z

I don't think I'm qualified to actually review whether this works or not (and unfortunately, it looks like there's a failing test), but I'm so excited for this to land! @jon-sully - 1. thank you! 2. please let me know how I can help with the tests.

jon-sully · 2021-04-20T13:19:37Z

Thanks for the kind words! Happy to help :) It's running great on my blog so I'll be excited to see it go live (hopefully!).

I don't think there are actually any failing tests and I did run the test suite locally with no failures; the CircleCI build is unfortunately failing for what seems like completely tangential reasons? Not sure why that would be happening, but may request maintainer support on that.

LekoArts

Some minor changes needed to the text portion. Thanks for the PR!

LekoArts · 2021-05-07T11:48:05Z

packages/gatsby-remark-prismjs/README.md

 ````

+The default rendering style for diff code blocks will be a colored `+` or `-` symbol and _not_ full line-length highlighting. This is depicted in the **first** example here: https://prismjs.com/plugins/diff-highlight/
+
+This plugin supports a configuration parameter, `showDiffHighlight`, which will add full line-length highlighting to _all_ Diff code blocks used by your Gatsby site with the format: `+` -> Highlight green, `-` -> highlight red, and `!` -> bolded line. Simply pass the configuration parameter with `true` and add the following to your `gatsby-browser.js` (_after_ the require for your chosen theme):


Suggested change

This plugin supports a configuration parameter, `showDiffHighlight`, which will add full line-length highlighting to _all_ Diff code blocks used by your Gatsby site with the format: `+` -> Highlight green, `-` -> highlight red, and `!` -> bolded line. Simply pass the configuration parameter with `true` and add the following to your `gatsby-browser.js` (_after_ the require for your chosen theme):

This plugin supports a configuration parameter, `showDiffHighlight`, which will add full line-length highlighting to all diff code blocks used by your Gatsby site with the format:

- `+` will highlight green

- `-` will highlight red

- `!` will bolded the line

Use `showDiffHighlight: true` inside `gatsby-config.js` and add the following to your `gatsby-browser.js` (after the require for your chosen theme):

LekoArts · 2021-05-07T11:55:57Z

packages/gatsby-remark-prismjs/README.md

 ````

+The default rendering style for diff code blocks will be a colored `+` or `-` symbol and _not_ full line-length highlighting. This is depicted in the **first** example here: https://prismjs.com/plugins/diff-highlight/


Suggested change

The default rendering style for diff code blocks will be a colored `+` or `-` symbol and _not_ full line-length highlighting. This is depicted in the **first** example here: https://prismjs.com/plugins/diff-highlight/

The default rendering style for diff code blocks will be a colored `+` or `-` symbol and not full line-length highlighting. This is depicted in the first example here: https://prismjs.com/plugins/diff-highlight/

We try to use the formatting sparingly and this seems a bit too much :)

LekoArts · 2021-05-07T11:56:50Z

packages/gatsby-remark-prismjs/README.md

@@ -392,12 +399,28 @@ unless explicitly overridden by the `promptUser` and `promptHost` options in the

 ### Diff code blocks

-You can specify language for `diff` code blocks by using `diff-[language]` to enable syntax highlighting in diffs:
+You can specify language for `diff` code blocks by using `diff-[language]` to enable syntax highlighting in diffs. Canonically, when writing code _diffs_, the code should be indented by two characters. If the code is being changed, the first character should be a `+`, `-`, or `!` otherwise left a space. The second character should always be a space. Git-style file-location coordinates need not be indented.


Suggested change

You can specify language for `diff` code blocks by using `diff-[language]` to enable syntax highlighting in diffs. Canonically, when writing code _diffs_, the code should be indented by two characters. If the code is being changed, the first character should be a `+`, `-`, or `!` otherwise left a space. The second character should always be a space. Git-style file-location coordinates need not be indented.

You can specify language for `diff` code blocks by using `diff-[language]` to enable syntax highlighting in diffs. Canonically, when writing code diffs, the code should be indented by two characters. If the code is being changed, the first character should be a `+`, `-`, or `!` otherwise left a space. The second character should always be a space. Git-style file-location coordinates need not be indented.

LekoArts · 2021-05-07T11:58:37Z

packages/gatsby-remark-prismjs/README.md

+
+This plugin supports a configuration parameter, `showDiffHighlight`, which will add full line-length highlighting to _all_ Diff code blocks used by your Gatsby site with the format: `+` -> Highlight green, `-` -> highlight red, and `!` -> bolded line. Simply pass the configuration parameter with `true` and add the following to your `gatsby-browser.js` (_after_ the require for your chosen theme):
+
+```js


Suggested change

```js

```js:title=gatsby-browser.js

require("prismjs/themes/prism-solarizedlight.css") // Place the diff-highlight after your existing theme

LekoArts · 2021-05-07T12:00:20Z

packages/gatsby-remark-prismjs/README.md

+**NOTE:** This is _not_ the same as the Diff code-block full line-length
+highlighting for diff'd lines. Those "line highlights" work great beyond


Suggested change

**NOTE:** This is _not_ the same as the Diff code-block full line-length

highlighting for diff'd lines. Those "line highlights" work great beyond

**Note:** This is not the same as the `showDiffHighlight` option for diff'd lines. Those "line highlights" work great beyond

iicdii · 2022-03-02T04:19:01Z

Hi, any news??

jon-sully · 2022-03-02T04:39:17Z

Hey @iicdii, thanks for the bump! I'd actually forgotten about this one. I'll jump back on it soon 🙂

mmazzarolo · 2022-08-29T09:34:19Z

FYI, this PR is still working fine on the latest versions of Gatsby. I wrote a blog post about the patch I'm using to apply it to the latest release of gatsby-remark-prismjs.

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Apr 19, 2021

Expose Full Line-Length Diff Highlighting

374dfbc

Enabled a config param to the remark-prism plugin that allows Diff code blocks to have the entire diff'd line be highlighted

jon-sully force-pushed the add-show-diff-highlights-configuration branch from 0a1341d to 374dfbc Compare April 19, 2021 18:40

jon-sully mentioned this pull request Apr 19, 2021

[gatsby-remark-prismjs] diff with language / highlight #20630

Closed

vladar added topic: remark/mdx Related to Markdown, remark & MDX ecosystem and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Apr 19, 2021

Merge remote-tracking branch 'upstream/master' into add-show-diff-hig…

11b4c80

…hlights-configuration

stephencweiss reviewed Apr 20, 2021

View reviewed changes

LekoArts changed the title ~~Expose Full Line-Length Diff Highlighting~~ feat(gatsby-remark-prismjs): Expose Full Line-Length Diff Highlighting May 7, 2021

LekoArts suggested changes May 7, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(gatsby-remark-prismjs): Expose Full Line-Length Diff Highlighting #30939

feat(gatsby-remark-prismjs): Expose Full Line-Length Diff Highlighting #30939

Uh oh!

jon-sully commented Apr 19, 2021

Uh oh!

stephencweiss Apr 20, 2021

Uh oh!

jon-sully Apr 20, 2021

Uh oh!

stephencweiss commented Apr 20, 2021

Uh oh!

jon-sully commented Apr 20, 2021

Uh oh!

LekoArts left a comment

Uh oh!

LekoArts May 7, 2021

Uh oh!

LekoArts May 7, 2021

Uh oh!

LekoArts May 7, 2021

Uh oh!

LekoArts May 7, 2021

Uh oh!

LekoArts May 7, 2021

Uh oh!

iicdii commented Mar 2, 2022

Uh oh!

jon-sully commented Mar 2, 2022

Uh oh!

mmazzarolo commented Aug 29, 2022

Uh oh!

Uh oh!

-This plugin supports a configuration parameter, `showDiffHighlight`, which will add full line-length highlighting to _all_ Diff code blocks used by your Gatsby site with the format: `+` -> Highlight green, `-` -> highlight red, and `!` -> bolded line. Simply pass the configuration parameter with `true` and add the following to your `gatsby-browser.js` (_after_ the require for your chosen theme):
+This plugin supports a configuration parameter, `showDiffHighlight`, which will add full line-length highlighting to all diff code blocks used by your Gatsby site with the format:
+- `+` will highlight green
+- `-` will highlight red
+- `!` will bolded the line
+Use `showDiffHighlight: true` inside `gatsby-config.js` and add the following to your `gatsby-browser.js` (after the require for your chosen theme):

		````

		The default rendering style for diff code blocks will be a colored `+` or `-` symbol and _not_ full line-length highlighting. This is depicted in the first example here: https://prismjs.com/plugins/diff-highlight/


		This plugin supports a configuration parameter, `showDiffHighlight`, which will add full line-length highlighting to _all_ Diff code blocks used by your Gatsby site with the format: `+` -> Highlight green, `-` -> highlight red, and `!` -> bolded line. Simply pass the configuration parameter with `true` and add the following to your `gatsby-browser.js` (_after_ the require for your chosen theme):

		```js

	```js
	```js:title=gatsby-browser.js
	require("prismjs/themes/prism-solarizedlight.css") // Place the diff-highlight after your existing theme

		NOTE: This is _not_ the same as the Diff code-block full line-length
		highlighting for diff'd lines. Those "line highlights" work great beyond

	NOTE: This is _not_ the same as the Diff code-block full line-length
	highlighting for diff'd lines. Those "line highlights" work great beyond
	Note: This is not the same as the `showDiffHighlight` option for diff'd lines. Those "line highlights" work great beyond

feat(gatsby-remark-prismjs): Expose Full Line-Length Diff Highlighting #30939

Are you sure you want to change the base?

feat(gatsby-remark-prismjs): Expose Full Line-Length Diff Highlighting #30939

Uh oh!

Conversation

jon-sully commented Apr 19, 2021

Description

Documentation

Related Issues

Uh oh!

stephencweiss Apr 20, 2021

Choose a reason for hiding this comment

Uh oh!

jon-sully Apr 20, 2021

Choose a reason for hiding this comment

Uh oh!

stephencweiss commented Apr 20, 2021

Uh oh!

jon-sully commented Apr 20, 2021

Uh oh!

LekoArts left a comment

Choose a reason for hiding this comment

Uh oh!

LekoArts May 7, 2021

Choose a reason for hiding this comment

Uh oh!

LekoArts May 7, 2021

Choose a reason for hiding this comment

Uh oh!

LekoArts May 7, 2021

Choose a reason for hiding this comment

Uh oh!

LekoArts May 7, 2021

Choose a reason for hiding this comment

Uh oh!

LekoArts May 7, 2021

Choose a reason for hiding this comment

Uh oh!

iicdii commented Mar 2, 2022

Uh oh!

jon-sully commented Mar 2, 2022

Uh oh!

mmazzarolo commented Aug 29, 2022

Uh oh!

Uh oh!