katex-elements
Web Components for easily using KaTeX in HTML
Installation
> npm i katex-elements
Usage
1. Import the elements
From HTML:
Import all the elements:
Import each element individually:
Note: the path to the JavaScript modules may depend on your npm installation
From JavaScript:
Import all the elements:
;
Import each element individually:
;;;
Note that this package uses "bare module specifiers" to import the katex
package. You will need a server or bundler that resolves these specifiers to URLs that will work in a browser, such as Rollup or @web/dev-server
.
2. Use the elements
<katex-inline>
Renders its text content in inline mode.
markup:
c = \pm\sqrt{a^2 + b^2}
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:
c = \pm\sqrt{a^2 + b^2}
output:
<katex-expr>
<katex-expr>
is the base class for <katex-inline>
and <katex-display>
. It renders inline or display based on the display-mode
attribute.
c = \pm\sqrt{a^2 + b^2}