加入直播会话:周四,美国东部时间上午 11 点,Storybook 9 版本发布和 AMA (你问我答)

此 Storybook 插件提供了一个面板,可在故事中显示您想要的任何代码。它主要是 Storybook 的语法高亮库的一个包装器

在 Github 上查看

storybook-addon-code

NPM npm install size

此 Storybook 插件提供了一个面板,可在故事中显示您想要的任何代码。它主要是 Storybook 的语法高亮库 的一个包装器,而该库又是 prism.js 的一个包装器。

Screenshot of Addon

安装

  1. npm install --save-dev @jls-digital/storybook-addon-code
  2. storybook-addon-code 添加到您的 Storybook 配置中
  3. sourceCode 参数添加到您的故事中
// .storybook/main.ts
const config: StorybookConfig = {
  addons: ['@jls-digital/storybook-addon-code'],
};

用法

在您的故事文件中,您现在可以将代码作为字符串导入(使用 vite 时,通过 '?raw' 查询参数),并将其传递给 sourceCode 参数。您甚至可以导入当前所在的文件

// button.stories.ts
import rawStories from './button.stories?raw';
import rawComponent from './button?raw';
const meta: Meta<IButtonStory> = {
  parameters: {
    sourceCode: [
      { name: 'Component', code: rawComponent },
      { name: 'Stories', code: rawStories },
    ]
  },
  title: 'Components/Button',
}

参数

名称 描述
name 子标签的名称。默认值:标签索引。 string
code 要显示的代码 string
language 用于语法高亮的代码语言。默认值:typescript "jxextra", "jsx", "json", "yml", "md", "bash", "css", "html", "tsc", "typescript", "graphql"

常见问题

(点击问题查看答案)

答:不用担心,这是 Storybook 的 TabsState 组件的问题。您只需重新加载页面即可正常工作。

答:是的,顺序由您传递给 sourceCode 参数的数组顺序决定。

贡献

我们鼓励您为本项目做出贡献!请查看贡献指南,了解如何进行以及如何设置您的开发环境。加入我们吧!

许可证

Storybook-Addon-Code 在 MIT 许可证 下发布。

作者
  • florian.dendorfer_jls.ch
    florian.dendorfer_jls.ch
标签