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 的更多信息