# @beeq/storybook-addon-html 中文文档

规范地址：https://npmcn.com/package/%40beeq/storybook-addon-html/

版本：7\.0\.0
npm 元数据更新时间：2026-02-02T08:42:19.505Z
中文译文更新时间：2026-11-07T20:40:09.399Z
软件包许可：AGPL-3\.0-or-later

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40beeq/storybook-addon-html
原文对照：https://npmcn.com/package/%40beeq/storybook-addon-html/?lang=original
项目主页：https://github.com/beeq/storybook-addon-html#readme
源码仓库：https://github.com/beeq/storybook-addon-html

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：325 kB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：storybook ^10\.0\.0
- 首次发布：2024-03-19T14:00:48.929Z
- 最新版本发布：2026-02-02T08:42:19.365Z
- 近 30 天下载量：3292（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 1 个）

## 中文简介

用于提取和显示编译的语法高亮的 HTML 的童话书加词

## 安装

```sh
npm install @beeq/storybook-addon-html
```

也可以使用：`pnpm add @beeq/storybook-addon-html`、`yarn add @beeq/storybook-addon-html`、`bun add @beeq/storybook-addon-html`

## README

# 故事书 Addon HTML

Storybook 的此附加词添加一个标签, 显示所编译的 HTML 故事的情节.

![Animated preview](https://raw.githubusercontent.com/whitespace-se/storybook-addon-html/master/image.gif)

## 所需资源

### 故事书 10.x

使用此加通的 9. x 版本 .

### 故事书9.x

使用这个加通的8.x版本.

### 故事书 8.x

使用这个加通的7.x版本.

## 开始

安装附加及其依赖.

与国家预防机制:

```sh
npm i --save-dev @whitespace/storybook-addon-html
```

与雅尔:

```sh
yarn add -D @whitespace/storybook-addon-html
```

与 PNPM 连接 :

```sh
pnpm add -D @whitespace/storybook-addon-html
```

### 注册加注

```js
// .storybook/main.js

module.exports = {
  // ...
  addons: [
    '@whitespace/storybook-addon-html',
    // ...
  ],
};
```

## 使用量

您可以覆盖用于抓取组件 HTML 的包装元素选择器.

```js
export const parameters = {
  html: {
    root: '#my-custom-wrapper', // default: #root
  },
};
```

一些框架将注释放入了HTML. 如果你想把这些取出 可以使用 `removeComments` 参数。 准备吧 `true` 删除所有注释 或设置为符合您评论内容的正则表达式 想要删除.

```js
export const parameters = {
  html: {
    removeComments: /^\s*remove me\s*$/, // default: false
  },
};
```

你也可以使用这个 `removeEmptyComments` 只删除空的参数 评论 `<!---->` 财务报告和审定财务报表 `<!-- -->`。 。 。 .

```js
export const parameters = {
  html: {
    removeEmptyComments: true, // default: false
  },
};
```

您可以覆盖 `showLineNumbers` 财务报告和审定财务报表 `wrapLines` 语法设置 通过使用 `highlighter` 参数 :

```js
export const parameters = {
  html: {
    highlighter: {
      showLineNumbers: true, // default: false
      wrapLines: false, // default: true
    },
  },
};
```

另一种隐藏不想要的代码的方式是定义 `transform` 选项。 这个 允许您对输出代码进行修改,例如删除属性 由框架注入.

```js
html: {
  transform: (code) => {
    // Remove attributes `_nghost` and `ng-reflect` injected by Angular:
    return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, '');
  };
}
```

您可以通过设置 HTML 面板来禁用 `disable` 参数为真. 这将隐藏和禁用您的故事中的 HTML 附加内容 .

```js
html: {
  disable: true, // default: false
}
```

## 常见问题

### @beeq/storybook-addon-html 是什么？

用于提取和显示编译的语法高亮的 HTML 的童话书加词

### 如何安装 @beeq/storybook-addon-html？

在项目目录运行 npm install @beeq/storybook-addon-html，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：storybook（^10\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @beeq/storybook-addon-html 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @beeq/storybook-addon-html 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @beeq/storybook-addon-html 可以商用吗？

@beeq/storybook-addon-html 使用 AGPL-3\.0-or-later 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。

### @beeq/storybook-addon-html 的下载量有多少？

根据 npm 官方下载统计，@beeq/storybook-addon-html 在 2026/10/08 – 2026/11/06 这 30 天内被下载 3,292 次，日均约 110 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @beeq/storybook-addon-html 还在维护吗？

最新版本 7\.0\.0 发布于 2026/02/02（9 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 1 个；首次发布于 2024/03/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。