源码
The Source
block is used to render a snippet of source code directly.
import { Meta, Source } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
<Meta of={ButtonStories} />
<Source of={ButtonStories.Primary} />
源码
import { Source } from '@storybook/addon-docs/blocks';
使用 props 和 parameters 进行配置
ℹ️ 与大多数块一样,Source
块在 MDX 中使用 props 进行配置。其中许多 props 的默认值来自于块命名空间 parameters.docs.source
中的对应 参数。
以下 language
配置是等效的
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
import { Button } from './Button';
const meta = {
component: Button,
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Basic: Story = {
parameters: {
docs: {
source: { language: 'tsx' },
},
},
};
<Source of={ButtonStories.Basic} language="tsx" />
code
类型: string
默认值: parameters.docs.source.code
提供要渲染的源代码。
import { Meta, Source } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
<Meta of={ButtonStories} />
<Source code={`const thisIsCustomSource = true;
if (isSyntaxHighlighted) {
console.log('syntax highlighting is working');
}`} />
dark
类型: boolean
默认值: parameters.docs.source.dark
确定片段是否以深色模式渲染。
excludeDecorators
类型: boolean
默认值: parameters.docs.source.excludeDecorators
确定源代码片段中是否渲染 decorators。
language
类型
'jsextra' | 'jsx' | 'json' | 'yml' | 'md' | 'bash' | 'css' | 'html' | 'tsx' | 'typescript' | 'graphql'
默认值: parameters.docs.source.language
或 'jsx'
指定用于语法高亮的语言。
of
类型: Story 导出
指定渲染哪个 story 的源代码。
transform
类型: (code: string, storyContext: StoryContext) => string | Promise<string>
默认值: parameters.docs.source.transform
一个异步函数,用于根据原始源代码和任何必要的 story 上下文,在渲染之前动态转换源代码。返回的字符串按原样显示。如果同时指定了 code
和 transform
,则 transform
将被忽略。
export default {
parameters: {
docs: {
source: {
transform: async (source) => {
const prettier = await import('prettier/standalone');
const prettierPluginBabel = await import('prettier/plugins/babel');
const prettierPluginEstree = await import('prettier/plugins/estree');
return prettier.format(source, {
parser: 'babel',
plugins: [prettierPluginBabel, prettierPluginEstree],
});
},
},
},
},
};
此示例展示了如何使用 Prettier 格式化文档中的所有源代码片段。transform 函数通过预览配置全局应用,确保所有 stories 的代码格式一致。
type
类型: 'auto' | 'code' | 'dynamic'
默认值: parameters.docs.source.type
或 'auto'
指定如何渲染源代码。
- **auto**: 如果 story 的
render
函数接受 args 输入并且当前使用的框架支持 **dynamic**,则与 **dynamic** 相同;否则与 **code** 相同 - **code**: 渲染
code
prop 的值,否则渲染静态 story 源代码 - **dynamic**: 渲染带有动态更新的 arg 值的 story 源代码