# @beoe/fenceparser 中文文档

规范地址：https://npmcn.com/package/%40beoe/fenceparser/

版本：2\.3\.1
npm 元数据更新时间：2025-04-14T18:46:26.240Z
中文译文更新时间：2026-11-07T22:49:41.767Z
软件包许可：MIT

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

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

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

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

## 中文简介

在 Markdown 中解析有栅栏的代码块的元数据的一个测试良好的解析器

## 安装

```sh
npm install @beoe/fenceparser
```

也可以使用：`pnpm add @beoe/fenceparser`、`yarn add @beoe/fenceparser`、`bun add @beoe/fenceparser`

## README

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

* * *

![](https://raw.githubusercontent.com/frencojobs/fenceparser/main/.github/cover.png)

一个测试良好的微小解析器 用于解析Markdown的 栅栏码块中的元数据.

  

## 概览 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/fenceparser?color=success&label=size) ![Codecov](https://img.shields.io/codecov/c/github/frencojobs/fenceparser?color=important)

如果你的马克道有这个密码栅栏,

```md
 ```ts twoslash {1-3, 5} title="Hello, World"
```

使用 [评论](https://github.com/remarkjs/remark) 将产生两个关于代码块的信息, `lang` 财务报告和审定财务报表 `meta` 像这样.

```json
{
  "lang": "ts",
  "meta": "twoslash {1-3, 5} title=\"Hello, World\""
}
```

使用 `fenceparser` 解析 `meta` 字符串到有用的对象.

```js
import parse from 'fenceparser'

console.log(parse(meta))

// {
//   twoslash: true,
//   highlight: { '1-3': true, '5': true },
//   title: 'Hello, World'
// }
```

> 解析器不会有意处理解析语言部分,因为它通常由Markdown解析器处理.

但是,如果你想允许宽松的语法语法,例如 `ts{1-3, 5}` 以及 `ts {1-3, 5}` 用于 [gatsby-remark-vscode 密码](https://github.com/andrewbranch/gatsby-remark-vscode) 举个例子,言语不能正确解释语言.

```json5
{
  "lang": "ts{1-3,", // because remark uses space to split
  "meta": "5}"
}
```

在这种情况下,你可以使用图书馆的 `lex` 函数以获取一个适当的符号化数组。 然后将第一个元素取出 `lang`。例如,

```js
import {lex, parse} from 'fenceparser'
// Notice this ^ parse is not the same the default export function

const full = [node.lang, node.meta].join(' ') // Join them back

const tokens = lex(full)
const lang = tokens.shift() // ts
const meta = parse(tokens) // { highlight: {'1-3': true, '5': true} }
```

## 语法

语法语法松散地取自于各种语法高手所使用的技术. 规则是这样的:

-   可使用有效的 HTML 属性, `attribute`, (中文(简体) ), `data-attribute`等 (中文(简体) ).
-   和HTML一样,顶级属性名称是大小写不敏感
-   没有数值的属性被指定为 `true`
-   属性值可以是单引字符串或双引出字符串、整数/浮数、布尔数、对象数或数组
-   非引用字符串只要没有被白空或断行相分隔,就有效, `attr=--theme-color`
-   对象可以接受有效属性作为孩子,或者接受有效属性,其值由 `:` 关键词, `{1-3, 5, ids: {7}}`
-   阵列就像 JavaScript 的阵列
-   没有属性密钥的对象 `{1-3} {7}` 合并并分配给 `highlight` 对象
-   无后缀

## 鸣谢

1.  该项目最初用于: [二斜线](https://github.com/shikijs/twoslash)。 。 。 .
2.  Lexer 和 parser 的初始实施基于书中的例子 [口译工](http://craftinginterpreters.com/)。 。 。 .

## 常见问题

### @beoe/fenceparser 是什么？

在 Markdown 中解析有栅栏的代码块的元数据的一个测试良好的解析器

### 如何安装 @beoe/fenceparser？

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

### @beoe/fenceparser 支持 TypeScript 吗？

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

### @beoe/fenceparser 支持 ESM 还是 CommonJS？

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

### @beoe/fenceparser 可以商用吗？

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

### @beoe/fenceparser 的下载量有多少？

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

### @beoe/fenceparser 还在维护吗？

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