storybook-addon-code

此 Storybook 插件提供了在故事中显示包含任何代码的面板的功能。它主要是一个 Storybook 的语法高亮器 的包装器，后者又是一个 prism.js 的包装器。

安装

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	子标签的名称。默认值：标签的索引。	字符串
code	要显示的代码	字符串
language	代码的语言，用于语法高亮。默认值：typescript。	"jxextra", "jsx", "json", "yml", "md", "bash", "css", "html", "tsc", "typescript", "graphql"

常见问题

（点击问题查看答案。）

答：不用担心，这是 Storybook 的 TabsState 组件的一个问题。你只需重新加载页面，它应该就能正常工作。

答：是的，顺序由传递给 sourceCode 参数的数组的顺序决定。

贡献

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

许可证

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