Diff not showing correctly in the snippets

[jonniebigodes]

When a user browses the tutorials, he's faced with an issue where the snippets defined as a diff (e.g., Simple Component section) mentioning the required changes are not showing up correctly. For example:

However, this situation doesn't happen when running a development build of the tutorials website. For example:

What needs to happen:

• Vet and isolate the problem and provide a workable solution to allow the diff snippets to be accurately displayed.

Thanks for the reminder @valentinpalkovic and @cdedreuille; if you have any ideas for design, would love to pair on them with you and address this issue.

[cdedreuille]

@jonniebigodes I would be happy to help with this one. We need to see what the highlighter could do.

Let's pair whenever you want.

[jonniebigodes]

To try and figure out the issue, I did some preliminary testing, and something may be happening on the deployment front.

• Added a new script to test the production build locally with the following:

   {
     "scripts": {
       "build:local": "gatsby build && gatsby serve"
   } 
  

• Ran it locally and opened up the production build available at http://localhost:9000/ and checked the Intro to Storybook tutorial's simple component page, and it yielded the following:

[fpigeonjr]

same issue on Safari 😞