Storybook HTML插件
这个Storybook插件增加了一个标签页,显示每个故事的编译后HTML。
要求
该插件的第6版需要Storybook 8和Prettier 3。如果您仍在使用Storybook 7,可以使用第5版。
从该插件的第7版开始,不再需要 react-syntax-highlighter
依赖。插件将使用Storybook默认的语法高亮工具,该工具也会使用Prettier格式化代码。
开始使用
安装插件及其依赖项。
使用NPM
npm i --save-dev @whitespace/storybook-addon-html
使用Yarn
yarn add -D @whitespace/storybook-addon-html
使用PNPM
pnpm add -D @whitespace/storybook-addon-html
注册插件
// .storybook/main.js
module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};
用法
您可以覆盖用于抓取组件HTML的包装器元素选择器。
export const parameters = {
html: {
root: "#my-custom-wrapper", // default: #root
},
};
一些框架会在HTML内部放置注释。如果您想移除这些注释,可以使用 removeComments
参数。将其设置为 true
以移除所有注释,或将其设置为一个匹配您想移除的注释内容的正则表达式。
export const parameters = {
html: {
removeComments: /^\s*remove me\s*$/, // default: false
},
};
您也可以使用 removeEmptyComments
参数仅移除空注释,例如 <!---->
和 <!-- -->
。
export const parameters = {
html: {
removeEmptyComments: true, // default: false
},
};
您可以使用 highlighter
参数覆盖语法高亮工具的 showLineNumbers
和 wrapLines
设置
export const parameters = {
html: {
highlighter: {
showLineNumbers: true, // default: false
wrapLines: false, // default: true
},
},
};
另一种隐藏不需要的代码的方法是定义 transform
选项。它允许您对输出代码进行任何更改,例如移除框架注入的属性。
html: {
transform: (code) => {
// Remove attributes `_nghost` and `ng-reflect` injected by Angular:
return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, "");
};
}
您可以通过将 disable
参数设置为 true 来禁用HTML面板。这将隐藏并禁用故事中的HTML插件。
html: {
disable: true, // default: false
}