这个 Storybook 插件提供了一个面板,可以在 stories 中显示任何你想要的代码。它主要是对 [Storybook 的语法高亮组件](https://github.com/storybookjs/storybook/tree/main/code/ui/components/src/components/syntaxhighlight)的封装
storybook-addon-code
这个 Storybook 插件提供了一个面板,可以在 stories 中显示任何你想要的代码。它主要是对 Storybook 的语法高亮组件的封装,后者又是对 prism.js 的封装。
安装
npm install --save-dev @jls-digital/storybook-addon-code
- 将
storybook-addon-code
添加到你的 Storybook 配置中 - 将
sourceCode
参数添加到你的 stories 中
// .storybook/main.ts
const config: StorybookConfig = {
addons: ['@jls-digital/storybook-addon-code'],
};
用法
在你的 story 文件中,现在可以将代码导入为字符串(使用 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 许可发布。