来源

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

¥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} />

来源

¥Source

import { Source } from '@storybook/addon-docs/blocks';

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

¥Type: string

默认：parameters.docs.source.code

¥Default: parameters.docs.source.code

提供要渲染的源代码。

¥Provides the source code to be rendered.

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

¥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.

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 | Promise<string>

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

默认：parameters.docs.source.transform

¥Default: parameters.docs.source.transform

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

¥An async 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.

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 格式化文档中的所有源代码片段。转换函数通过预览配置全局应用，确保所有故事的代码格式一致。

¥This example shows how to use Prettier to format all source code snippets in your documentation. The transform function is applied globally through the preview configuration, ensuring consistent code formatting across all stories.

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