Mathematics
This extension allows you to write and visualize even complex mathematical formulas or equations in your editor. Please note that the current version is still in a very basic stage.
Installation
Pro Extension
All Tiptap Pro extensions require access to our private registry, set this up first.
Once done, you can install the extension from our private registry. Note: Additionally we need to install the KaTeX library, which is used for most of the magic.
npm install @tiptap-pro/extension-mathematics katex
Additional Setup
You are free to style the rendering element and the editor input.
Import of KaTeX styling (needed).
import 'katex/dist/katex.min.css'
The following classes allow you to select and style the math-decorations. For an example, see demonstration code at the end of this page.
/* Decoration containing the actual text */
.Tiptap-mathematics-editor {
// …
}
/* Container of the KaTeX rendering */
.Tiptap-mathematics-render {
// …
}
Settings
regex
Tiptap needs to know when the text is mathematical. Therefor a regular expression pattern allows us to define this shorthand. E.g. using the TeX shorthand $ … $
(see default below). Matches become decorated – they are not stored as own nodes or marks!
Default: /\$([^\$]*)\$/gi
katexOptions
For the math typesetting the extension uses the third party library KaTeX. To adjust its behaviour, you can pass KaTeX options to it. Find all of them here.
Default: undefined
import Mathematics from '@tiptap-pro/extension-mathematics'
// [...]
Mathematics.configure({
katexOptions: {
maxSize: 300
}
})