storybookjs/storybook

[Bug]: theme `fontCode` not applied consistently when writing MDX

Open

#21,804 opened on 2023年3月28日

GitHub で見る
 (5 comments) (0 reactions) (1 assignee)TypeScript (89,909 stars) (10,058 forks)batch import
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

コントリビューターガイド