storybookjs/storybook
View on GitHub[Bug]: theme `fontCode` not applied consistently when writing MDX
Open
#21,804 opened on Mar 28, 2023
bughas workaroundhelp wantedmdxsev:S3
Description
Describe the bug
The theme fontCode is not applied in some scenarios when writing MDX, instead either the browser user agent default (monospace) is used or the storybook default (ui-monospace, Menlo, Monaco, ...).
{/* .storybook/preview.tsx */}
import type { Preview } from '@storybook/react';
import { create } from '@storybook/theming/create';
export const theme = create({
base: 'light',
fontCode: 'VT323', // <-- the property I'm referring to
...
});
const preview: Preview = {
parameters: {
docs: { theme },
...
}
};
export default preview;
{/* src/stories/reproduction.mdx */}
import { Meta, Source } from '@storybook/blocks';
export function Code({ code = '' }) {
return <code>{code}</code>;
}
<Meta title="Example/Reproduction" />
# Reproduction
`Inline code with backticks` ✅
<code>Inline code as code element</code> ❌
<Code code="Inline code as react component returning code element" /> ✅
```
'Plain markdown code block' ❌
```
```js
'Syntax highlighted markdown code block' ✅
```
<Source code={`'Syntax highlighted source block' ❌`} />
I believe the expected behavior to be that the font-family specified as the theme fontCode would be applied in all of the above scenarios but.. maybe some of the scenarios is for good reason?
To Reproduce
https://stackblitz.com/edit/github-fj1jen?file=src/stories/reproduction.mdx
System
Environment Info:
System:
OS: macOS 13.1
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Browsers:
Chrome: 111.0.5563.110
Firefox: 111.0.1
Safari: 16.2
npmPackages:
@storybook/addon-essentials: ^7.0.0-rc.8 => 7.0.0-rc.8
@storybook/addon-interactions: ^7.0.0-rc.8 => 7.0.0-rc.8
@storybook/addon-links: ^7.0.0-rc.8 => 7.0.0-rc.8
@storybook/blocks: ^7.0.0-rc.8 => 7.0.0-rc.8
@storybook/react: ^7.0.0-rc.8 => 7.0.0-rc.8
@storybook/react-vite: ^7.0.0-rc.8 => 7.0.0-rc.8
@storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
Additional context
No response