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 授權條款下發布。