# @beoe/rehype-code-hook 中文文档

规范地址：https://npmcn.com/package/%40beoe/rehype-code-hook/

版本：0\.1\.1
npm 元数据更新时间：2025-04-14T18:47:34.063Z
中文译文更新时间：2026-11-07T22:49:16.770Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40beoe/rehype-code-hook
原文对照：https://npmcn.com/package/%40beoe/rehype-code-hook/?lang=original
项目主页：https://github.com/stereobooster/beoe#readme
源码仓库：https://github.com/stereobooster/beoe

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

- 包体积（解压后）：12.8 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2024-05-05T20:53:49.959Z
- 最新版本发布：2025-04-14T18:47:33.841Z
- 近 30 天下载量：2600（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

代码栅栏的重奏插件

## 安装

```sh
npm install @beoe/rehype-code-hook
```

也可以使用：`pnpm add @beoe/rehype-code-hook`、`yarn add @beoe/rehype-code-hook`、`bun add @beoe/rehype-code-hook`

## README

# @beoe/rehype-code-hook (英语)

Rehype 插件,以更容易为代码写入自定义处理器,例如:

```html
Block-code:
<pre><code class="language-js">const x = 1;</code></pre>

Inline-code:
<code>x</code>
```

在减记中,它相当于:

````md
Block-code:

```js
const x = 1;
```

Inline-code:
`x`
````

如果您想要创建回旋插件, 此插件是有用的 :

-   突出显示代码, 如 `@shikijs/rehype`, (中文(简体) ), `rehype-prism`, (中文(简体) ), `rehype-highlight` 包括:.
-   渲染图表,比如 `rehype-mermaid`
-   做别的事情,像 `rehype-color-chips`

## 使用量

基本例子是这样的:

```js
import { rehypeCodeHook } from "@beoe/rehype-code-hook";
import { generateSvg } from "./generateSvg.js";

export const rehypeExampleDiagram = (options = {}) => {
  return rehypeCodeHook({
    ...options,
    code: ({ code }) => generateSvg(code),
  });
};
```

如果您有这样的代码( 在 Markdown 标记中更为清晰, 但插件实际上在 rehype 级别上有效 ) :

````md
```js {1,10}
const x = 1;
```
````

`code` 将调用回调:

```js
{
  code: "const x = 1;\n",
  inline: false,
  language: "js",
  meta: "{1,10}"
}
```

如果你有这样的代码:

```md
`const x = 1;`
```

`code` 将调用回调:

```js
{
  code: "const x = 1;",
  inline: true,
  language: undefined,
  meta: undefined
}
```

现在是时候让你的东西:

-   您可以检查 `code`, (中文(简体) ), `inline`, (中文(简体) ), `language`, (中文(简体) ), `meta` 如果你要找的不是这里 你可以回去了 `undefined` - 挡板不变
-   如果你决定做一些东西 你可以回来 `string` (例如SVG或HTML),您可以返回 HAST 片段,也可以返回对字符串或 HAST 的许诺
    -   如果返回值是 HAST 片段, 它将会替换整个代码块
    -   如果返回值是字符串, 它将被转换为 HAST, 然后将替换整个代码块
    -   如果返回值是承诺的,它会等到它解决,并做上面的一个步骤

您可以配置您的插件, 仅用于特定的情况, 例如 :

-   仅用于语言 `example`数字 : `rehypeCodeHook({language: "example",..})`
-   仅用于内置代码 : `rehypeCodeHook({inline: true,..})`

要启动缓冲需要通过 `Map`\- 像存储 :

```js
rehypeCodeHook({ code, cache: new Map(), hashTostring: true });
```

我查过了 [@ beoe/ cache (帮助)](https://npmcn.com/packages/cache/),但它应该工作 任何存储有 `Map` 像接口。 你可以通过额外的 `salt` 参数以重置缓存,例如当您的插件配置改变时.

## 提示

### 元字符串

如果你需要解析 `meta` 参数,例如:

-   [https://github.com/Microflash/fenceparser (英语)](https://github.com/Microflash/fenceparser)
-   [https://github.com/frencojobs/fenceparser 互联网档案馆的存檔,存档日期2013-12-02](https://github.com/frencojobs/fenceparser)

### 天体

如果您想要使用复韵插件 `code` astro 中的元素, 您需要禁用内置高亮显示器, 然后确保它会出现在您的回旋插件之后

```js
import { rehypeShiki, markdownConfigDefaults } from "@astrojs/markdown-remark";

export default defineConfig({
  markdown: {
    syntaxHighlight: false,
    rehypePlugins: [
      // you rehype plugin goes here
      // re-enable default Astro code highlighter
      [rehypeShiki, markdownConfigDefaults.shikiConfig],
    ],
  },
});
```

### 星光

**重要** 使用 v. 22+ 数据

```js
export default defineConfig({
  markdown: {
    rehypePlugins: [
      // you rehype plugin goes here
      // after you can insert code highlighter
    ],
  },
});
```

### 图像而非内置 SVG

我的主要用例是内置 SVG, 但如果您想要生成图像, 您可以使用 [数据 URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)像这样

```js
{
  code: () =>
    `<img src="data:image/png;base64,${dataBuffer.toString("base64")}">`;
}
```

如果您想要转换 SVG 数据 URL 使用 [`mini-svg-data-uri`](https://www.npmjs.com/package/mini-svg-data-uri) 或类似.

我没有调查 如何将图像与 [vfile 文档](https://github.com/vfile/vfile)。 。 。 .

## 开始

-   测试同步函数和缓存

## 常见问题

### @beoe/rehype-code-hook 是什么？

代码栅栏的重奏插件

### 如何安装 @beoe/rehype-code-hook？

在项目目录运行 npm install @beoe/rehype-code-hook，或使用 pnpm add / yarn add / bun add。

### @beoe/rehype-code-hook 支持 TypeScript 吗？

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

### @beoe/rehype-code-hook 支持 ESM 还是 CommonJS？

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

### @beoe/rehype-code-hook 可以商用吗？

@beoe/rehype-code-hook 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @beoe/rehype-code-hook 的下载量有多少？

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

### @beoe/rehype-code-hook 还在维护吗？

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