原始碼

Source 區塊用於直接渲染程式碼片段。

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

原始碼

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

預設值：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

決定程式碼片段是否以深色模式渲染。

excludeDecorators

類型：boolean

預設值：parameters.docs.source.excludeDecorators

決定是否在原始碼片段中渲染裝飾器。

format

類型：boolean | 'dedent' | BuiltInParserName

預設值：parameters.docs.source.format 或 true

指定原始碼使用的格式。true 和 'dedent' 都具有相同的效果，即刪除任何多餘的縮排。支援所有有效的prettier 剖析器名稱。

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：如果 Story 的 render 函式接受 args 輸入，且使用中的框架支援 dynamic，則與 dynamic 相同；否則與 code 相同
• code：呈現 code 屬性的值，否則呈現靜態 Story 原始碼
• dynamic：呈現具有動態更新的參數值的 Story 原始碼