来源

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

¥The Source block is used to render a snippet of source code directly.

{/* 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';

// 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" />

code

类型：string

¥Type: string

默认：parameters.docs.source.code

¥Default: parameters.docs.source.code

提供要渲染的源代码。

¥Provides the source code to be rendered.

{/* 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

¥Type: boolean

默认：parameters.docs.source.dark

¥Default: parameters.docs.source.dark

确定片段是否以夜间模式渲染。

¥Determines if the snippet is rendered in dark mode.

excludeDecorators

类型：boolean

¥Type: boolean

默认：parameters.docs.source.excludeDecorators

¥Default: parameters.docs.source.excludeDecorators

确定 decorators 是否在源代码片段中渲染。

¥Determines if decorators are rendered in the source code snippet.

format

类型：boolean | 'dedent' | BuiltInParserName

¥Type: boolean | 'dedent' | BuiltInParserName

默认：parameters.docs.source.format 或 true

¥Default: parameters.docs.source.format or true

指定源代码上使用的格式。true 和 'dedent' 都具有相同的效果，可以删除任何多余的缩进。支持所有有效的 更漂亮的解析器名称。

¥Specifies the formatting used on source code. Both true and 'dedent' have the same effect of removing any extraneous indentation. Supports all valid prettier parser names.

language

类型：

¥Type:

'jsextra' | 'jsx' | 'json' | 'yml' | 'md' | 'bash' | 'css' | 'html' | 'tsx' | 'typescript' | 'graphql'

默认：parameters.docs.source.language 或 'jsx'

¥Default: parameters.docs.source.language or 'jsx'

指定用于语法高亮的语言。

¥Specifies the language used for syntax highlighting.

of

类型：故事导出

¥Type: Story export

指定渲染哪个故事的来源。

¥Specifies which story's source is rendered.

transform

类型：(code: string, storyContext: StoryContext) => string

¥Type: (code: string, storyContext: StoryContext) => string

默认：parameters.docs.source.transform

¥Default: parameters.docs.source.transform

基于原始源和任何必要的故事背景，在渲染之前动态转换源的函数。返回的字符串按原样显示。如果同时指定了 code 和 transform，则将忽略 transform。

¥A function to dynamically transform the source before being rendered, based on the original source and any story context necessary. The returned string is displayed as-is. If both code and transform are specified, transform will be ignored.

type

类型：'auto' | 'code' | 'dynamic'

¥Type: 'auto' | 'code' | 'dynamic'

默认：parameters.docs.source.type 或 'auto'

¥Default: parameters.docs.source.type or 'auto'

指定源代码的渲染方式。

¥Specifies how the source code is rendered.

• 自动：与动态相同，如果故事的 render 函数接受参数输入并且正在使用的框架支持动态；否则与代码相同

  ¥auto: Same as dynamic, if the story's render function accepts args inputs and dynamic is supported by the framework in use; otherwise same as code

• 代码：渲染 code prop 的值，否则渲染静态故事源

  ¥code: Renders the value of code prop, otherwise renders static story source

• 动态：使用动态更新的 arg 值渲染故事源

  ¥dynamic: Renders the story source with dynamically updated arg values