storybookjs/storybook

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

Open

#21,804 opened on Mar 28, 2023

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

Contributor guide