# @aarkue/tiptap-math-extension 中文文档

规范地址：https://npmcn.com/package/%40aarkue/tiptap-math-extension/

版本：1\.4\.0
npm 元数据更新时间：2025-09-14T09:25:59.801Z
中文译文更新时间：2026-11-05T19:16:58.290Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40aarkue/tiptap-math-extension
原文对照：https://npmcn.com/package/%40aarkue/tiptap-math-extension/?lang=original
项目主页：https://github.com/aarkue/tiptap-math-extension

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

- 包体积（解压后）：94.8 kB，23 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@tiptap/core ^3\.0\.0，@tiptap/pm ^3\.0\.0
- 首次发布：2024-03-07T17:40:25.308Z
- 最新版本发布：2025-09-14T09:25:59.624Z
- 近 30 天下载量：41977（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 0 个）

## 中文简介

TipTap 编辑器的数学/ LaTeX 扩展

## 安装

```sh
npm install @aarkue/tiptap-math-extension
```

也可以使用：`pnpm add @aarkue/tiptap-math-extension`、`yarn add @aarkue/tiptap-math-extension`、`bun add @aarkue/tiptap-math-extension`

## README

# TipTap 编辑器的数学/ LaTeX 扩展

在编辑器中直接使用内线数学表达式 / LaTeX !

[![npm license](https://img.shields.io/npm/l/%40aarkue%2Ftiptap-math-extension)](https://www.npmjs.com/package/@aarkue/tiptap-math-extension) [![npm version](https://img.shields.io/npm/v/%40aarkue%2Ftiptap-math-extension)](https://www.npmjs.com/package/@aarkue/tiptap-math-extension) [![npm downloads](https://img.shields.io/npm/dy/%40aarkue%2Ftiptap-math-extension)](https://www.npmjs.com/package/@aarkue/tiptap-math-extension)

## 使用量

见演示 `/example` 快速介绍如何使用此软件包. 这个 **国家防范机制的软件包现已提供** 作为 [**@aarkue/tiptap-math-extension (英语)**](https://www.npmjs.com/package/@aarkue/tiptap-math-extension)。 。 。 . 可以使用 `npm install @aarkue/tiptap-math-extension`。 。 。 .

要正确渲染 LaTeX 表达式, 您还需要包含 **KaTeX CSS 系统**。 。 。 . 使用时 [维特](https://vitejs.dev/) 您可以使用 `import "katex/dist/katex.min.css";` 在使提示编辑器的组件中. 这需要您同时安装 `katex` 使用 npm 软件包 `npm i katex` (单位:千美元)[https://www.npmjs.com/package/katex (中文(简体) )](https://www.npmjs.com/package/katex)) (中文(简体) ). 纳入CSS的方法也不同,例如使用CDN,例如: `jsdelivr.net`。见 [https://katex.org/docs/浏览器](https://katex.org/docs/browser) 更多信息。 然而,请注意,由于JS已经与这个插件捆绑在一起,因此只需要手工纳入CSS.

## 特征

### 显示内置的 LaTeX

写一个围绕数学表达式 `$`\- 符号自动生成一个已渲染的 LaTeX 表达式. 划界人也可通过相应的选项进行配置.

要编辑或删除 LaTeX,只需按后空格,在表达式前放出光标. 已转换的 LaTeX 将会消失, LaTeX 源将再次成为正常可编辑的文本 .

### 评估 LaTeX 表达式

**注:由于1.2.0版本需要明确启用此特性**。 。 。 . 使用 `evaluate` 配置选项 :

```typescript
const editor = useEditor({
  extensions: [StarterKit, MathExtension.configure({ evaluation: true })],
  content: "<p>Hello World!</p>",
});
```

计算结果可采用下列方法显示: [评价x.js](https://npmcn.com/package/%40aarkue/tiptap-math-extension/%5Bhttps://arthanzel.github.io/evaluatex/) 图书馆.

使用 `:=` 标记(例如, `x := 120`) (中文(简体) ). 然后,表达式可以包括这个变量(例如, `x \cdot 4=`) (中文(简体) ). 结束计算表达式 `=` 以自动显示计算结果.

## 截图 + Demo

试出演示直接在线在 [https://aarkue.github.io/tiptap-math-extension/ 页面存档备份,存于互联网档案馆](https://aarkue.github.io/tiptap-math-extension/)来啊!

![2023-06-03\_16-05](https://github.com/aarkue/tiptap-math-extension/assets/20766652/3f5cc6d5-f0eb-4c2a-9ba7-87367cfdf119)

![2023-06-03\_16-05\_1](https://github.com/aarkue/tiptap-math-extension/assets/20766652/a722b978-06ef-48c0-8aa0-ba9bedff58a1)

[https://github.com/aarkue/tiptap-math-extension/assets/20766652/96f31846-d4a8-4cb2-b963-ff6da57daeb1 互联网档案馆的存檔,存档日期2013-12-22](https://github.com/aarkue/tiptap-math-extension/assets/20766652/96f31846-d4a8-4cb2-b963-ff6da57daeb1)

## 选项

有一些选项可以配置扩展名 。 所有可用选项及其默认值的打字符定义见下文.

```typescript
export interface MathExtensionOption {
  /** Evaluate LaTeX expressions */
  evaluation: boolean;
  /** Add InlineMath node type (currently required as inline is the only supported mode) */
  addInlineMath: boolean;
  /** KaTeX options to use for evaluation, see also https://katex.org/docs/options.html */
  katexOptions?: KatexOptions;
  /** Delimiters to auto-convert. Per default dollar-style (`dollar`) ($x_1$ and $$\sum_i i$$) are used.
   *
   * The `bracket` option corresponds to `\(x_1\)` and `\[\sum_i i \]`.
   *
   * Alternatively, custom inline/block regexes can be used.
   * The inner math content is expected to be the match at index 1 (`props.match[1]`).
   */
  delimiters?:
    | "dollar"
    | "bracket"
    | {
        inlineRegex?: string;
        blockRegex?: string;
        inlineStart?: string;
        inlineEnd?: string;
        blockStart?: string;
        blockEnd?: string;
      };
      
  /** If and how to represent math nodes in the raw text output (e.g., `editor.getText()`)
   * 
   * - `"none"`: do not include in text at all
   * - `"raw-latex"`: include the latex source, without delimiters (e.g., `\frac{1}{n}`)
   * - `{placeholder: "[...]`"}: represent all math nodes as a fixed placeholder string (e.g., `[...]`)
   * 
   * The option delimited-latex is currently disabled because of issues with it re-triggering input rules (see also https://github.com/ueberdosis/tiptap/issues/2946).
   * 
   * - ~`"delimited-latex"`: include the latex source with delimiters (e.g., `$\frac{1}{n}$`)~
   */
    renderTextMode?: "none"|"raw-latex"|{placeholder: string}, // |"delimited-latex"
}
export const DEFAULT_OPTIONS: MathExtensionOption = { addInlineMath: true, evaluation: false, delimiters: "dollar", renderTextMode: "raw-latex" };
```

见 [https://katex.org/docs/options.html (中文(简体) )](https://katex.org/docs/options.html) 以获取可用的 KATeX 选项的完整列表.

## 相关或使用的项目

-   [Tiptap 编辑器](https://github.com/ueberdosis/tiptap): 这是扩展的可扩展编辑器.
-   [卡特克语Name](https://github.com/KaTeX/KaTeX):一个用于网络的LaTeX渲染引擎,用于渲染LaTeX表达式.
-   [评价x.js](https://github.com/arthanzel/evaluatex): 用于评价 LaTeX 表达式的数值(例如, `1 + (2 \cdot 3) = 7`) (中文(简体) ).
-   [维特](https://github.com/vitejs/vite):曾为示范项目服务.

## 常见问题

### @aarkue/tiptap-math-extension 是什么？

TipTap 编辑器的数学/ LaTeX 扩展

### 如何安装 @aarkue/tiptap-math-extension？

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

### @aarkue/tiptap-math-extension 支持 TypeScript 吗？

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

### @aarkue/tiptap-math-extension 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @aarkue/tiptap-math-extension 可以商用吗？

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

### @aarkue/tiptap-math-extension 的下载量有多少？

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

### @aarkue/tiptap-math-extension 还在维护吗？

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