# @benrbray/prosemirror-math 中文文档

规范地址：https://npmcn.com/package/%40benrbray/prosemirror-math/

版本：1\.0\.0
npm 元数据更新时间：2024-04-14T05:27:12.885Z
中文译文更新时间：2026-11-07T22:25:57.109Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：72.6 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：katex ^0\.16\.10，prosemirror-commands ^1\.5\.2，prosemirror-history ^1\.4\.0，prosemirror-inputrules ^1\.4\.0，prosemirror-keymap ^1\.2\.2，prosemirror-model ^1\.20\.0，prosemirror-state ^1\.4\.3，prosemirror-transform ^1\.8\.0，prosemirror-view ^1\.33\.4
- 首次发布：2021-03-28T13:04:59.844Z
- 最新版本发布：2024-04-14T05:27:12.701Z
- 近 30 天下载量：138240（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 0 个）

## 中文简介

在ProseMirror中用于一等数学支持的Schema和插件.

## 安装

```sh
npm install @benrbray/prosemirror-math
```

也可以使用：`pnpm add @benrbray/prosemirror-math`、`yarn add @benrbray/prosemirror-math`、`bun add @benrbray/prosemirror-math`

## README

# `prosemirror-math`

[![](https://img.shields.io/npm/v/@benrbray/prosemirror-math?style=flat-square)](https://www.npmjs.com/package/@benrbray/prosemirror-math) ![license](https://img.shields.io/github/license/benrbray/prosemirror-math?style=flat-square) ![types](https://img.shields.io/npm/types/@benrbray/prosemirror-math?style=flat-square)

> 请不要犹豫 报告问题或提出特写请求! 欢迎捐款!

## 概览

这个 `prosemirror-math` 软件包为舒适地书写数学提供了图案和插件 [表达器](https://prosemirror.net/)。在 TypeScript 中写入,数学渲染由 [卡特克语Name](https://katex.org/)您可以安装 [npm 软件包](https://www.npmjs.com/package/@benrbray/prosemirror-math) 或使用此寄存器作为您自己的插件的起点。 该项目的重要档案有:

-   `lib/math-schema.ts`:一个支持内线并显示数学节点的最小ProseMirror schema.
-   `lib/math-nodeview.ts`页:1 `NodeView` 负责渲染和编辑数学节点.
-   `public/prosemirror-math.css`: 包含数学节点正确显示所需的所有样式。 此文件可以很容易地被修改以实现您想要的外观 .

## 基本使用量([你自己试试看!](http://benrbray.com/prosemirror-math/)(中文(简体) )

不同于其他编辑器, 此插件 **将数学作为文本本身的一部分**,而不是作为一个只能通过对话框编辑的"原子". 例如,可以通过将光标带入其中直接编辑内线数学节点:

![edit inline math](https://npmcn.com/package/%40benrbray/prosemirror-math/img/prosemirror-math_inline.gif)

显示数学支持多行编辑, 如下所示 :

![edit display math](https://npmcn.com/package/%40benrbray/prosemirror-math/img/prosemirror-math_display.gif)

要创建新的数学表达式, 只需将 LaTeX 数学符号附加在美元符号中, 例如 `$x+y=5$`。当您完成打入时,将自动创建一个新的数学节点:

![create inline math](https://npmcn.com/package/%40benrbray/prosemirror-math/img/prosemirror-math_insert-inline.gif)

要开始显示数学块, 请创建空白行和类型 `$$` 然后是空间。 多行编辑器将出现 。 要离开街区,按 `Ctrl-Enter` 或导航鼠标或箭头键.

![create display math](https://npmcn.com/package/%40benrbray/prosemirror-math/img/prosemirror-math_insert-display.gif)

数学节点在使用箭头键时表现为正则文本或 `Backspace`。您可以选择、复制和粘贴数学节点,就像普通文本一样! 从数学节点内按 `Ctrl-Backspace` 删除整个节点.

> **提普:** 您可以用 `\providecommand{\cmd}{...}`来啊!

见 KATeX 文档列表 [支持的 LaTeX 命令](https://katex.org/docs/supported.html)未来, `prosemirror-math` 还会接受一个自定义的回调,用于引用 MathJax 等替代渲染器.

## 安装和设置

请注意: `prosemirror-math` 建在顶部 [表达器](https://prosemirror.net/),它本身有一个陡峭的学习曲线。 至少,你必须明白 [`Schema`](https://prosemirror.net/docs/ref/#model.Document_Schema) 财务报告和审定财务报表 [`Plugins`](https://prosemirror.net/docs/ref/#state.Plugin_System) 合并 `prosemirror-math` 进入你的项目。 从安装开始 `npm` 软件包 :

```
npm install @benrbray/prosemirror-math
```

### 支助科

首先,确保您包含 CSS 文件 `prosemirror-math` 财务报告和审定财务报表 `katex` 在任何需要的页面上。 它们可通过以下途径找到:

```
node_modules/katex/dist/katex.min.css
node_modules/@benrbray/prosemirror-math/dist/prosemirror-math.css
```

如果你在使用一个捆绑机 `vite` 或者说 `webpack`,您也许可以包含这样的 CSS 文件 :

```
import "@benrbray/prosemirror-math/dist/prosemirror-math.css";
import "katex/dist/katex.min.css";
```

### 司马

添加 `math_inline` 财务报告和审定财务报表 `math_display` 您的节点 `prosemirror` 文档计划。 这些名字很重要! 如果您修改了方案, 请注意不要更改标记的值 `important!` 否则你可能会遇到出乎意料的行为!

```typescript
import { Schema } from "prosemirror-model";

let schema = new Schema({
    nodes: {
        doc: {
            content: "block+"
        },
        paragraph: {
            content: "inline*",
            group: "block",
            parseDOM: [{ tag: "p" }],
            toDOM() { return ["p", 0]; }
        },
        math_inline: {               // important!
            group: "inline math",
            content: "text*",        // important!
            inline: true,            // important!
            atom: true,              // important!
            toDOM: () => ["math-inline", { class: "math-node" }, 0],
            parseDOM: [{
                tag: "math-inline"   // important!
            }]
        },
        math_display: {              // important!
            group: "block math",
            content: "text*",        // important!
            atom: true,              // important!
            code: true,              // important!
            toDOM: () => ["math-display", { class: "math-node" }, 0],
            parseDOM: [{
                tag: "math-display"  // important!
            }]
        },
        text: {
            group: "inline"
        }
    }
});
```

### 输入规则

如果您希望用户能够通过打入轻松添加新的数学节点 `$...$` 用于内置数学或 `$$` 后面是块数学的空格,您需要创建 [`InputRule`](https://prosemirror.net/docs/ref/#inputrules.InputRule) 实例。 您可以自行写作,也可以使用由 `prosemirror-math`。 。 。 .

> **责备:** 确保 `NodeType`您为每个输入规则提供了属于您传递给您的 ProseMirror 的相同的计划实例 `EditorView` 举个例子 否则你就会在控制台上看到奇怪的错误!

```typescript
import {
    makeBlockMathInputRule, makeInlineMathInputRule,
    REGEX_INLINE_MATH_DOLLARS, REGEX_BLOCK_MATH_DOLLARS
} from "@benrbray/prosemirror-math";

// create input rules (using default regex)
let inlineMathInputRule = makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, editorSchema.nodes.math_inline);
let blockMathInputRule = makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, editorSchema.nodes.math_display);
```

### 插件

从下面的列表中选择您需要的插件, 并将其传递到您的 `EditorState` 实例,以及您创建的输入规则.

-   `mathPlugin` **(必须)** 提供 `prosemirror-math`。 。 。 .
-   `mathBackspaceCmd` _(建议)_ 当包含在您的 [键盘映射](https://prosemirror.net/docs/ref/#keymap.keymap) 联 合 国 `"Backspace"` 键,按下数学节点右边界的后空格,可将光标放入数学节点,而不是删除.
-   `insertMathCmd(nodeType: NodeType)` _(可选)_ 用于创建命令的帮助器函数,用于在当前文档位置插入数学节点.
-   `mathSerializer` _(建议)_ 附 录 `clipboardTextSerializer` 您编辑器的道具 。 粘贴从 a 选择 `prosemirror-math` 编辑器到纯文本编辑器,确保粘贴的数学表达式由 `$...$` 财务报告和审定财务报表 `$$...$$`。 。 。 .

建议设置如下:

```typescript
import { mathPlugin, mathBackspaceCmd, insertMathCmd, mathSerializer } from "@benrbray/prosemirror-math";

// prosemirror imports
import { EditorView } from "prosemirror-view";
import { EditorState, Plugin } from "prosemirror-state";
import { chainCommands, deleteSelection, selectNodeBackward, joinBackward, Command } from "prosemirror-commands";
import { keymap } from "prosemirror-keymap";
import { inputRules } from "prosemirror-inputrules";

// plugins (order matters)
let plugins:Plugin[] = [
    mathPlugin,
    keymap({
        "Mod-Space" : insertMathCmd(schema.nodes.math_inline),
        // modify the default keymap chain for backspace
        "Backspace": chainCommands(deleteSelection, mathBackspaceCmd, joinBackward, selectNodeBackward),
    }),
    inputRules({ rules: [ inlineMathInputRule, blockMathInputRule ] })
];

// create prosemirror state
let state = EditorState.create({
    schema: editorSchema,
    plugins: plugins,
    doc: /* ... */
})

// create prosemirror view
let view = new EditorView(editorElt, {
    state,
    clipboardTextSerializer: (slice) => { return mathSerializer.serializeSlice(slice) },
})
```

## 发展

清除此寄存器并安装必要的依赖性 :

```
git clone git@github.com:benrbray/prosemirror-math.git
cd prosemirror-math
npm install
```

从根目录中可以运行脚本 `package.json`。 。 。 .

-   使用 `npm run build` 用于建设 `prosemirror-math` 软件包
-   使用 `npm run build:site` 生成静态演示网站
-   使用 `npm run dev` 启动本地开发服务器

## 释放

> (本节为帮助我回忆出版新版所需步骤)

制作供测试的预发版本:

```bash
# begin a prerelease
npm version premajor --preid=rc # from 1.0.0 to 2.0.0-rc.0
npm version preminor --preid=rc # from 1.0.0 to 1.1.0-rc.0
npm version prepatch --preid=rc # from 1.0.0 to 1.0.1-rc.0

# increment the prerelease version number
npm version prerelease # from 2.0.0-rc.0 to 2.0.0-rc.1

# promote the prerelease version
npm version major # from 2.0.0-rc.1 to 2.0.0
npm version minor # from 1.1.0-beta.0 to 1.1.0
npm version patch # from 1.0.1-alpha.0 to 1.0.1
```

## 常见问题

### @benrbray/prosemirror-math 是什么？

在ProseMirror中用于一等数学支持的Schema和插件\.

### 如何安装 @benrbray/prosemirror-math？

在项目目录运行 npm install @benrbray/prosemirror-math，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：katex（^0\.16\.10）、prosemirror-commands（^1\.5\.2）、prosemirror-history（^1\.4\.0）、prosemirror-inputrules（^1\.4\.0）、prosemirror-keymap（^1\.2\.2）、prosemirror-model（^1\.20\.0）、prosemirror-state（^1\.4\.3）、prosemirror-transform（^1\.8\.0）、prosemirror-view（^1\.33\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @benrbray/prosemirror-math 支持 TypeScript 吗？

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

### @benrbray/prosemirror-math 支持 ESM 还是 CommonJS？

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

### @benrbray/prosemirror-math 可以商用吗？

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

### @benrbray/prosemirror-math 的下载量有多少？

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

### @benrbray/prosemirror-math 还在维护吗？

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