Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntax highlighting for diff code blocks in .mdx not working after 6.1.x+

See original GitHub issue

Describe the bug In 6.0.x, the syntax highlighting for diffs was supported in mdx out-of-the-box. After upgrading to 6.1.x or later, this is no longer the case.

To Reproduce Steps to reproduce the behavior:

Clone the repro repo
Switch to the branch corresponding to the Storybook version to test (git checkout 6.1.x or 6.0.x)
Run yarn install && yarn storybook
View the “Introduction” story in the launched Storybook dev server

Expected behavior Syntax highlighting on diff code blocks should work or be supported

Screenshots Before (6.0.x) 😎 Screenshot of an example with syntax highlighting working on diffs.

After (6.1.x+) 😢 Screenshot of an example where syntax highlighting no longer works on diffs.

Additional context Not sure if there’s a work-around for this currently that I might be missing, but I can dig around the docs and see

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

shilmancommented, Jun 1, 2021

We removed a bunch of syntax highlighters as part of a performance push in 6.1. The bundle size and build times were both reduced substantially. We might consider adding this one back, or figure out how to make it opt-in.

1reaction

jonniebigodescommented, Aug 11, 2021

Closing this now as the pr with documentation updates to address this issue was merged and should be published soon.

Let me know if the issue surfaces back and I’ll gladly re-open and we can follow up on it until we have a solution.

Stay safe all

Top Results From Across the Web

Syntax highlighting - MDX

This guide explores how to apply syntax highlighting to code blocks. MDX supports standard markdown syntax (CommonMark). It does not apply ...

Using Prismjs for syntax highlighted code blocks is breaking ...

I'm running into an issue where the rendered code blocks (inside a <pre> element are too wide on my mobile layout. For now...

NextJS MDX Blog with Syntax Highlighting and TypeScript

In this video we will build out the functionality such that we can create blog posts using MDX so we can use components...

rehype-prism-plus - npm

rehype plugin to highlight code blocks in HTML with Prism (via refractor) with additional line highlighting and line numbers functionalities.

remark-prism | Yarn - Package Manager

Syntax highlighter for markdown code blocks using Prism - with support for certain ... This allows syntax highlighting without running any client-side code ......