Custom elements for easily using KaTeX
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
demo.html
index.js
katex-display.js
katex-import.js
katex-inline.js
katex-module-shim.js
package-lock.json
package.json
readme-katex-display.png
readme-katex-inline.png

README.md

katex-elements

Web Components for easily using KaTeX in HTML

Installation

> npm i katex-elements

Usage

1. Import the elements

From HTML:

<script type="module" src="./node_modules/katex-elements/katex-display.js"></script>
<script type="module" src="./node_modules/katex-elements/katex-inline.js"></script>

Note: the path to the JavaScript modules may depend on your npm installation

From JavaScript:

import {KatexDisplay} from './node_modules/katex-elements/katex-display.js';
import {KatexInline} from './node_modules/katex-elements/katex-inline.js';

2. Use the elements

<katex-inline>

Renders its text content in inline mode.

markup:

<katex-inline>c = \pm\sqrt{a^2 + b^2}</katex-inline>

output:

<katex-display>

Renders its text content in display mode, which will put the math in display style (so \int and \sum are large, for example), and will center the math in a block element.

markup:

<katex-display>c = \pm\sqrt{a^2 + b^2}</katex-display>

output: