Math typesetting for Wagtail CMS powered by KaTeX.

This package is forked from gatensj/wagtail-draftail-katex.
This package contains svg icon from Font Awesome, which is licensed under the CC BY 4.0 License.

Quick Start

Installation

Install the package using the following command:

pip install wagtail-katex

Add wagtailkatex to the INSTALLED_APPS section in your settings.py file:

INSTALLED_APPS = [
    ...
    "wagtailkatex",
    ...
]

Add RichTextField to your page model, then you should find the math typesetting icon in the toolbar of rich-text editor in Wagtail admin views.

Template rendering

Add required assets to your page template:

{% load wagtailkatex %}

<link rel="stylesheet" href="{% wagtailkatex_media 'css' %}" />
<script src="{% wagtailkatex_media 'js' %}"></script>
<script src="{% static 'wagtailkatex/wagtailkatex-template.js' %}"></script>

The page content contains KaTeX embed should render properly.

Config

The KaTeX library is linked directly to a CDN distribution by default. If you want to change to the nearby server, the path could be specified in the settings.py file:

WAGTAILKATEX_SETTINGS = {
    "js": [
        "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js",
        "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js",
    ]
    "css": [
        "https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"
    ],
}

Alternatively, you can make your own copy in the static folder and serve it as Django static files:

WAGTAILKATEX_SETTINGS = {
    "js": [
        "my_app/katex.min.js",
        "my_app/auto-rdner.min.js",
    ],
    "css": [
        "my_app/katex.min.css"
    ],
}