[Bug]: Code in .md file throws error

[mcookdev]

Describe the bug

Importing basic markdown into a story works as expected. Including any inline or block code (using "" or "```") crashes the page with:Cannot read properties of undefined (reading 'fonts')`.

Reproduction link

https://stackblitz.com/edit/github-wj2kwd?file=src%2Fstories%2FTestBroken.md

Reproduction steps

1. Go to the stackblitz link above
2. Open the Test Example
3. Observe that Working works without error
4. Observe that Broken throws the above error
5. See Test.stories.js, TestWorking.md, and TestBroken.md for the example source

System

System: OS: macOS 14.7 CPU: (10) arm64 Apple M1 Pro Shell: 5.9 - /bin/zsh Binaries: Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm <----- active pnpm: 9.9.0 - ~/Library/pnpm/pnpm Browsers: Chrome: 129.0.6668.91 Edge: 129.0.2792.79 Safari: 18.0.1 npmGlobalPackages: storybook: 8.1.7

Additional context

I was eventually able to work around this issue by converting the md files to mdx and adjusting the story usage slightly. However, I would prefer most common (non-MDX) markdown, including code blocks, to work without error.

[shilman]

What's happening here is that Storybook is adding a markdown loader so that you can import markdown files and display them in your docs. Thus it is using Storybook's own components to render the code block. This is probably not what you want.

However, there is a workaround which is to provide Storybook's Code component with the theme it needs to render.

// .storybook/previedw.js
import { convert, ThemeProvider, themes } from 'storybook/internal/theming';

/** @type { import('@storybook/react').Preview } */
const preview = {
  // other preview settings
  decorators: [
    (story) => (
      <ThemeProvider theme={convert(themes.light)}>{story()}</ThemeProvider>
    ),
  ],
};

export default preview;