Source

观看视频教程

The Source 块用于直接渲染源代码片段。

Screenshot of Source block

ButtonDocs.mdx

import { Meta, Source } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
<Source of={ButtonStories.Primary} />

Source

import { Source } from '@storybook/blocks';

使用 props 和 parameters 进行配置

ℹ️ 与大多数块一样，Source 块在 MDX 中使用 props 进行配置。这些 props 中的许多 props 的默认值都来自块命名空间 parameters.docs.source 中的相应 parameter。

以下 language 配置是等效的

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Basic: Story = {
  parameters: {
    docs: {
      source: { language: 'tsx' },
    },
  },
};

ButtonDocs.mdx

<Source of={ButtonStories.Basic} language="tsx" />

上面的示例在 story 级别应用了 parameter，但它也可以应用于 component（或 meta）级别或 project 级别。

`code`

类型: string

默认值: parameters.docs.source.code

提供要渲染的源代码。

ButtonDocs.mdx

import { Meta, Source } from '@storybook/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

确定代码片段是否以暗黑模式渲染。

仅当 Source 块独立渲染时才支持浅色模式。当作为 Canvas 块的一部分渲染时（例如在 autodocs 中），它将始终使用暗黑模式。

`excludeDecorators`

类型: boolean

默认值: parameters.docs.source.excludeDecorators

确定是否在源代码片段中渲染装饰器。

`format`

类型: boolean | 'dedent' | BuiltInParserName

默认值: parameters.docs.source.format 或 true

指定用于源代码的格式。true 和 'dedent' 都具有相同的效果，即删除任何多余的缩进。支持所有有效的 prettier parser 名称。

`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

默认值: parameters.docs.source.transform

一个函数，用于在渲染之前动态转换源代码，基于原始源代码和任何必要的 story 上下文。返回的字符串按原样显示。如果同时指定了 code 和 transform，则 transform 将被忽略。

`type`

类型: 'auto' | 'code' | 'dynamic'

默认值: parameters.docs.source.type 或 'auto'

指定如何渲染源代码。

auto: 与 dynamic 相同，如果 story 的 render 函数接受 args 输入，并且正在使用的框架支持 dynamic；否则与 code 相同
code: 渲染 code prop 的值，否则渲染静态 story 源代码
dynamic: 渲染带有动态更新的 arg 值的 story 源代码

请注意，动态代码片段仅在 story 使用 args 并且该 story 的 Story 块与 Source 块一起渲染时才有效。