CKEditor 5 mathematical feature

This package is the best TeX-based math plugin for CKEditor 5. You can use it to insert, edit and view mathematical equation / formulas. This plugin supports MathJax, KaTeX and custom typesetting engines.

Supported input and output formats

Supported input and output formats are:

<!-- MathJax style http://docs.mathjax.org/en/v2.7-latest/advanced/model.html#how-mathematics-is-stored-in-the-page -->
<script type="math/tex">\sqrt{\frac{a}{b}}</script>
<script type="math/tex; mode=display">\sqrt{\frac{a}{b}}</script>
<!-- CKEditor 4 style https://ckeditor.com/docs/ckeditor4/latest/features/mathjax.html -->
<span class="math-tex">\( \sqrt{\frac{a}{b}} \)</span>
<span class="math-tex">\[ \sqrt{\frac{a}{b}} \]</span>

Available typesetting engines

MathJax

• Tested by using version 2.7.5 and TeX-MML-AM_HTMLorMML configuration
• Use \( \) delimiters for inline and \[ \] delimiters for display

KaTeX

• Tested by using version 0.11.0
• Doesn't support preview feature because .ck-reset_all * css rules from ckeditor5-ui and ckeditor5-theme-lark breaks it.

Custom

It's possible with engine: (equation, element, display) => { ... } math config.

• equation is equation in TeX format without delimiters
• element is DOM element reserved for rendering
• display is boolean. Typesetting should be inline when false

Plugin options

InlineEditor.defaultConfig = {
    // ...
    math: {
        engine: 'mathjax', // or katex or function (equation, element, display) => { ... }
        outputType: 'script', // or span
        forceOutputType: false
    }
    // ...
}

Styles

• Styles requires PostCSS like offical CKEditor plugins