storybook: [Bug]: Multi-line codeblocks not working in MDX files

Describe the bug

Using multi-line code blocks within an MDX file (by way of 3 back ticks) does not format correctly as code. So the following:

This is some
code

Would not look correct. This is in an existing repository with Storybook that has been upgraded. If I downgrade to Storybook 7.2.0 then everything works as expected. The output looks as follows

7.4.0 -> 7.5.2 image

7.2.0 (and below) image

To Reproduce

I have been unable to create a small standalone example despite several attempts. This seems to be work fine in a brand new project with Storybook. If I copy over all the configuration from main.ts and match the same dependencies however it still appears broken in my project.

Therefore the easiest reproduction at the moment is:

git clone https://github.com/IPWright83/chart-io
git checkout upgrade-storybook

Manually update the /packages/react/package.json Storybook which can be done using a find and replace on "7.2.0" to "7.5.2".

pnpm install
pnpm storybook

Then open http://localhost:6006/?path=/docs/getting-started--docs in a browser. You will see the incorrectly rendered code block.

System

Storybook Environment Info:

  System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.2.0 - ~/.nvm/versions/node/v20.2.0/bin/node
    Yarn: 1.22.11 - /usr/bin/yarn
    npm: 9.6.6 - ~/.nvm/versions/node/v20.2.0/bin/npm
    pnpm: 8.10.2 - ~/.local/share/pnpm/pnpm <----- active
  Browsers:
    Chrome: 119.0.6045.105
  npmPackages:
    chromatic: ^6.17.0 => 6.24.1 


### Additional context

This problem was introduced between versions `7.2.0` and `7.4.0` (unfortunately `7.3.0` doesn't load for me so I can't test). 

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 2
  • Comments: 15 (4 by maintainers)

Most upvoted comments

Confirming this bug when upgrading from 7.2.0 to 7.5.3.

EDIT: This bug only happens when running Storybook in dev mode, building for deployment and loading it from the /storybook-static/ does not present this issue.

7.2.0

Screenshot 2023-11-28 at 12 23 35

7.5.3

Screenshot 2023-11-28 at 12 23 43

Can this be re-opened? A reproduction was provided…