@stormid/storybook-html-addon-markup

這個 Storybook 擴充套件會新增一個面板，顯示 Story 的靜態 HTML 標記。

使用方式

安裝

$ npm i @stormid/storybook-html-addon-markup --dev

將這行程式碼新增到您的 addons.js 檔案中（如果需要，請在您的 Storybook 設定目錄中建立此檔案）。

import '@stormid/storybook-html-addon-markup';

匯入 withMarkup 裝飾器，將靜態標記新增到您的 Story 中。

適用於所有 Story

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/html';
import { withMarkup } from '@storybook/addon-a11y';

// should only be added once
// best place is in config.js
addDecorator(withMarkup);
configure(require.context('../src', true, /\.stories\.js$/), module);

或針對個別 Story

import { h, Fragment } from 'preact';
import render from 'preact-render-to-string/jsx';
import MyComponent from '../../src/templates/components/my-component';
import { withMarkup } from '@storybook/addon-a11y';

export default { 
    title: 'My component',
    decorators: [withMarkup]
};

export const Default = () => render(<MyComponent />);