Storybook Addon 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
}