TipTap 编辑器的数学/ LaTeX 扩展
在编辑器中直接使用内线数学表达式 / LaTeX !
使用量
见演示 /example 快速介绍如何使用此软件包.
这个 国家防范机制的软件包现已提供 作为 @aarkue/tiptap-math-extension (英语)。 。 。 .
可以使用 npm install @aarkue/tiptap-math-extension。 。 。 .
要正确渲染 LaTeX 表达式, 您还需要包含 KaTeX CSS 系统。 。 。 .
使用时 维特 您可以使用 import "katex/dist/katex.min.css"; 在使提示编辑器的组件中.
这需要您同时安装 katex 使用 npm 软件包 npm i katex (单位:千美元)https://www.npmjs.com/package/katex (中文(简体) )) (中文(简体) ).
纳入CSS的方法也不同,例如使用CDN,例如: jsdelivr.net。见 https://katex.org/docs/浏览器 更多信息。 然而,请注意,由于JS已经与这个插件捆绑在一起,因此只需要手工纳入CSS.
特征
显示内置的 LaTeX
写一个围绕数学表达式 $- 符号自动生成一个已渲染的 LaTeX 表达式.
划界人也可通过相应的选项进行配置.
要编辑或删除 LaTeX,只需按后空格,在表达式前放出光标. 已转换的 LaTeX 将会消失, LaTeX 源将再次成为正常可编辑的文本 .
评估 LaTeX 表达式
注:由于1.2.0版本需要明确启用此特性。 。 。 .
使用 evaluate 配置选项 :
const editor = useEditor({
extensions: [StarterKit, MathExtension.configure({ evaluation: true })],
content: "<p>Hello World!</p>",
});
计算结果可采用下列方法显示: 评价x.js 图书馆.
使用 := 标记(例如, x := 120) (中文(简体) ).
然后,表达式可以包括这个变量(例如, x \cdot 4=) (中文(简体) ).
结束计算表达式 = 以自动显示计算结果.
截图 + Demo
试出演示直接在线在 https://aarkue.github.io/tiptap-math-extension/ 页面存档备份,存于互联网档案馆来啊!
选项
有一些选项可以配置扩展名 。 所有可用选项及其默认值的打字符定义见下文.
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 (中文(简体) ) 以获取可用的 KATeX 选项的完整列表.
相关或使用的项目
- Tiptap 编辑器: 这是扩展的可扩展编辑器.
- 卡特克语Name:一个用于网络的LaTeX渲染引擎,用于渲染LaTeX表达式.
- 评价x.js: 用于评价 LaTeX 表达式的数值(例如,
1 + (2 \cdot 3) = 7) (中文(简体) ). - 维特:曾为示范项目服务.