BlockNote Math

A BlockNote React extension for writing LaTeX with KaTeX. It provides compact inline formulas and a native slash-menu command for full-width equation blocks. The original LaTeX source is preserved in exported HTML for round-trip paste support.

Example

Install

npm install @defensestation/blocknote-math katex

The host application owns the KaTeX version and imports both stylesheets once:

import"katex/dist/katex.min.css";import"@defensestation/blocknote-math/styles.css";

Use

Add both supplied schema specs and register the Equation slash-menu item.

import{BlockNoteSchema,defaultBlockSpecs,defaultInlineContentSpecs}from"@blocknote/core";import{getDefaultReactSlashMenuItems,SuggestionMenuController,useCreateBlockNote,}from"@blocknote/react";import{BlockNoteView}from"@blocknote/mantine";import{getMathSlashMenuItems,latexInlineContentSpecs,mathBlockSpecs,}from"@defensestation/blocknote-math";import{filterSuggestionItems}from"@blocknote/core/extensions";import"katex/dist/katex.min.css";import"@defensestation/blocknote-math/styles.css";constschema=BlockNoteSchema.create({blockSpecs: {
...defaultBlockSpecs,
...mathBlockSpecs,},inlineContentSpecs: {
...defaultInlineContentSpecs,
...latexInlineContentSpecs,},});functionEditor(){consteditor=useCreateBlockNote({ schema });constgetSlashMenuItems=async(query: string)=>filterSuggestionItems([
...getDefaultReactSlashMenuItems(editor),
...getMathSlashMenuItems(editor),],query,);return(<BlockNoteVieweditor={editor}slashMenu={false}><SuggestionMenuControllertriggerCharacter="/"getItems={getSlashMenuItems}/></BlockNoteView>);}

Type /math, then select Inline equation or Block equation. Write TeX in the focused field and press Enter or click away to render it.

Edit a formula

Click an inline or display formula to open its compact LaTeX editor. The formula updates live in the document while you type. Enter or click away applies a valid equation, Shift+Enter adds a line, and Escape cancels.

Package contents

• latexInlineContentSpecs: inline formula schema entry.
• mathBlockSpecs: full-width equation-block schema entry.
• getMathSlashMenuItems: native /math menu items for inline and block equations.
• @defensestation/blocknote-math/styles.css: plugin UI styles.

Publishing

Run npm run typecheck and npm run build before publishing.