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

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
  }
})

#Usage