katex-editorjs

KaTeX Plugin for EditorJs

Enable your EditorJS to write mathematical symbol with KaTeX.

Credits

Created with ❤ by Muhammad Affandes

Installation

With package manager NPM or Yarn

Run following command to install plugins.

npm install katex-editorjs

Or

yarn add katex-editorjs

Load via CDN

Place following line at the end of your HTML body tag.

...
<script src="https://cdn.jsdelivr.net/npm/katex-editorjs"></script>
...

Usage

Insert following snippets to your EditorJs configuration object.

import KatexEditor from "./katex-editor"
 
// Your EditorJs init
const editorjs = new EditorJS({
    // ...
    tools: {
        katexBlock: {
            class: KatexEditor
        },
    },
    // ...
});
 

Config Params

Params	Description
emptyEditMode	String. (Optional) Text shows if TeX is empty (in edit mode).
emptyViewMode	String. (Optional) Text shows if TeX is empty (in view mode).
delimiter	String. (Optional) Delimiter character. Default is '$$'.
throwOnError	Boolean. (Optional) See KaTeX Documentation. Default is false.
displayMode	Boolean. (Optional) See KaTeX Documentation. Default is true.
legno	Boolean. (Optional) See KaTeX Documentation. Default is false.
fleqn	Boolean. (Optional) See KaTeX Documentation. Default is true.
output	String. (Optional) See KaTeX Documentation. Default is 'html'.

Output Data

Math symbol will be wrapped with div tag with .aff-katex-wrapper class.

{
    "type": "katexBlock",
    "data": {
        "tex": "\\sum{x}"
    }
}