如何在 Storybook 6 文档中呈现干净 html

Question

我正在使用 Storybook 来记录一些 html 组件。

但是，为了在 mdx 中创建故事，我必须使用 Story 组件，这意味着我不能使用原始 html 而是必须 return 我的标记作为字符串：

import { Story } from '@storybook/addon-docs/blocks';

<Story name="Simple Button">
   {`<button class="my-button">Download Now</button>`}
</Story>

将源代码呈现为字符串：

有什么方法可以 return 清理标记或让源显示为真实 html？显示引号和缺乏语法突出显示的来源导致文档质量不佳。

Answer 1

自从 v6.0.0-alpha.22 以来，您似乎可以在 Storybook 中呈现任何自定义源代码。

使用 Canvas 块的 params 对象，您可以为您的故事设置自定义来源。

import { Story, Canvas } from '@storybook/addon-docs/blocks';

<Canvas>
  <Story name="custom source" height="100px" parameters={{ docs: { source: { code: `<button class="my-button">Download Now</button>` } } }}>
    {`<button class="my-button">Download Now</button>`}
  </Story>
</Canvas>

这里渲染的是故事中的按钮，源码使用raw HTML:

如何在 Storybook 6 文档中呈现干净 html

How to render clean html in Storybook 6 docs

html

javascript

markdown

reactjs

storybook