参加在线直播:周四,美国东部时间上午11点,Storybook 9发布及AMA问答

HTML预览

一个Storybook插件,用于提取并显示编译后的语法高亮HTML

在Github上查看

Storybook HTML插件

这个Storybook插件增加了一个标签页,显示每个故事的编译后HTML。

Animated preview

要求

该插件的第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 参数覆盖语法高亮工具的 showLineNumberswrapLines 设置

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
}
开发者
  • media-factory-cz
    media-factory-cz
支持
    Angular
    Ember
    HTML
    Preact
    React
    React native
    Svelte
    Vue
    Web Components
标签