storybook-addon-code

這個 Storybook 附加元件提供了在 stories 上顯示任何您想要的程式碼面板的功能。它主要是 storybook 的語法高亮顯示器 的包裝器，而這個高亮顯示器又是 prism.js 的包裝器。

安裝

1. npm install --save-dev @jls-digital/storybook-addon-code
2. 將 storybook-addon-code 加入您的 Storybook 設定
3. 將 sourceCode 參數加入您的 stories

// .storybook/main.ts
const config: StorybookConfig = {
  addons: ['@jls-digital/storybook-addon-code'],
};

用法

在您的 story 檔案中，您現在可以將程式碼作為字串匯入（使用 vite 時，可使用 '?raw' 查詢參數），並將其傳遞給 sourceCode 參數。您甚至可以匯入您目前所在的檔案

// button.stories.ts
import rawStories from './button.stories?raw';
import rawComponent from './button?raw';
const meta: Meta<IButtonStory> = {
  parameters: {
    sourceCode: [
      { name: 'Component', code: rawComponent },
      { name: 'Stories', code: rawStories },
    ]
  },
  title: 'Components/Button',
}

引數

名稱	描述	值
name	子標籤的名稱。預設值：標籤的索引。	字串
code	要顯示的程式碼	字串
language	應該用於語法高亮顯示的程式碼語言。預設值：typescript。	"jxextra", "jsx", "json", "yml", "md", "bash", "css", "html", "tsc", "typescript", "graphql"

常見問題

（點擊問題即可查看答案。）

答：別擔心，這是 Storybook 的 TabsState 元件的問題。您只需重新整理頁面，它應該就可以正常運作。

答：是的，順序是由您傳遞給 sourceCode 參數的陣列順序所決定的。

貢獻

我們鼓勵您為這個專案做出貢獻！請查看 貢獻指南，以了解如何進行以及如何設定您的開發環境。加入我們！

許可證

Storybook-Addon-Code 是在 MIT 許可證下發布的。