storybook-addon-code

一個 Storybook 擴充功能，可以在 Storybook 中為您的故事在 Storybook 面板中展示程式碼範例。

開始使用

npm i --save-dev storybook-addon-code

使用方法

在您的 Storybook 設定中建立一個名為 addons.js 的檔案。

將以下內容新增至其中

import * as CodeAddon from '../src/register';
CodeAddon.setTabs(
    [{ label: 'Sass', type: 'sass' }, {label: 'TypeScript', type: 'typescript'}]
);

setTab 函式接受一個類似 {label: 'Sass', type:'sass'} 的物件，或者如果您想要有多個分頁，您可以傳遞一個包含多個物件的陣列。標籤將會顯示在 Storybook 面板中。

然後像這樣編寫您的故事

import { storiesOf } from '@storybook/react';
import withCode from 'storybook-addon-code';
import Button from './Button';

const styleFile = require('raw-loader!./style.scss');
const typescriptFile  = require('./test.tsx');

storiesOf('Button', module)
  .addDecorator(withCode(typescriptFile, 'typescript'))
  .addDecorator(withCode(styleFile, 'sass'))
  .add('with text', () =>
      <Button onClick={action('clicked')}>Hello Button</Button>
    )

withCode 函式可用的格式清單

1. clike (withCode(YourCFile, 'clike'))
2. css (withCode(YourCssFile, 'css'))
3. html (withCode(YourHtmlFile, 'html'))
4. js | javascript (withCode(YourJavascriptFile, 'js'))
5. markup (withCode(YourMarkupFile, 'js'))
6. mathml (withCode(YourMatHmlFile, 'mathml'))
7. sass (withCode(YourSassFile, 'sass'))
8. svg (withCode(YourSvgFile, 'svg'))
9. ts (withCode(YourTsFile, 'ts'))
10. typescript (withCode(YourTypescriptFile, 'typescript'))
11. xml (withCode(YourXmlFile, 'xml'))

請查看 這個範例 故事，以了解更多關於 withCode API 的資訊