storybookjs/storybook
GitHub で見る[Bug]: theme `fontCode` not applied consistently when writing MDX
Open
#21,804 opened on 2023年3月28日
bughas workaroundhelp wantedmdxsev:S3
説明
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