Use inline math expression / LaTeX directly in your editor!
\n\n \n[](https://www.npmjs.com/package/@aarkue/tiptap-math-extension)\n[](https://www.npmjs.com/package/@aarkue/tiptap-math-extension)\n[](https://www.npmjs.com/package/@aarkue/tiptap-math-extension)\n\n
\nHello World!
\",\n});\n```\n\nCalculation results can be shown inline, using the [Evaluatex.js]([https://arthanzel.github.io/evaluatex/) library.\n\nDefine variables using the `:=` notation (e.g., `x := 120`).\nThen, expressions can include this variable (e.g., `x \\cdot 4=`).\nEnd the calculating expressions with `=` to automatically show the computed result.\n\n## Screenshots + Demo\n\nTry out the demo directly online at [https://aarkue.github.io/tiptap-math-extension/](https://aarkue.github.io/tiptap-math-extension/)!\n\n\n\n\n\nhttps://github.com/aarkue/tiptap-math-extension/assets/20766652/96f31846-d4a8-4cb2-b963-ff6da57daeb1\n\n## Options\n\nThere are a few options available to configure the extension. See below for typescript definitions of all available options and their default value.\n\n```typescript\nexport interface MathExtensionOption {\n /** Evaluate LaTeX expressions */\n evaluation: boolean;\n /** Add InlineMath node type (currently required as inline is the only supported mode) */\n addInlineMath: boolean;\n /** KaTeX options to use for evaluation, see also https://katex.org/docs/options.html */\n katexOptions?: KatexOptions;\n /** Delimiters to auto-convert. Per default dollar-style (`dollar`) ($x_1$ and $$\\sum_i i$$) are used.\n *\n * The `bracket` option corresponds to `\\(x_1\\)` and `\\[\\sum_i i \\]`.\n *\n * Alternatively, custom inline/block regexes can be used.\n * The inner math content is expected to be the match at index 1 (`props.match[1]`).\n */\n delimiters?:\n | \"dollar\"\n | \"bracket\"\n | {\n inlineRegex?: string;\n blockRegex?: string;\n inlineStart?: string;\n inlineEnd?: string;\n blockStart?: string;\n blockEnd?: string;\n };\n \n /** If and how to represent math nodes in the raw text output (e.g., `editor.getText()`)\n * \n * - `\"none\"`: do not include in text at all\n * - `\"raw-latex\"`: include the latex source, without delimiters (e.g., `\\frac{1}{n}`)\n * - `{placeholder: \"[...]`\"}: represent all math nodes as a fixed placeholder string (e.g., `[...]`)\n * \n * 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).\n * \n * - ~`\"delimited-latex\"`: include the latex source with delimiters (e.g., `$\\frac{1}{n}$`)~\n */\n renderTextMode?: \"none\"|\"raw-latex\"|{placeholder: string}, // |\"delimited-latex\"\n}\nexport const DEFAULT_OPTIONS: MathExtensionOption = { addInlineMath: true, evaluation: false, delimiters: \"dollar\", renderTextMode: \"raw-latex\" };\n```\n\nSee https://katex.org/docs/options.html for a complete list of the available KaTeX options.\n\n## Related or Used Projects\n\n- [Tiptap Editor](https://github.com/ueberdosis/tiptap): The extensible editor for which this is an extension.\n- [KaTeX](https://github.com/KaTeX/KaTeX): A LaTeX rendering engine for the web, used to render LaTeX expressions.\n- [Evaluatex.js](https://github.com/arthanzel/evaluatex): Used to evaluate LaTeX expressions to a numeric value (e.g., `1 + (2 \\cdot 3) = 7`).\n- [Vite](https://github.com/vitejs/vite): Used to serve the example demo project.\n","readmeFilename":"README.md"}