原始碼

觀看教學影片

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

原始碼

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

使用 props **和** parameters 進行設定

ℹ️ 與大多數區塊一樣，Source 區塊在 MDX 中使用 props 進行設定。這些 props 中的許多預設值都來自區塊命名空間中對應的 parameter，即 parameters.docs.source。

以下 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，但它也可以應用在組件（或 meta）層級或專案層級。

`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 區塊的一部分呈現時（例如在自動文件中），它將始終使用深色模式。

`excludeDecorators`

類型：boolean

預設值：parameters.docs.source.excludeDecorators

決定是否在原始碼片段中呈現 decorators。

`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 context。返回的字串將按原樣顯示。如果同時指定了 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 區塊一起呈現時才有效。