KaTeX Expression
A web component/custom element (<katex-expression>) to render KaTeX expressions.
Table of Contents
Installation
HTML
Insert the following script tags in the <head> section of your html
<script type="module" src="https://unpkg.com/@navsnpm/katex-expression/dist/katex-expression/katex-expression.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@navsnpm/katex-expression/dist/katex-expression/katex-expression.js"></script>React/Angular/Vue
Install <katex-expression> using npm
npm i --save @navsnpm/katex-expression
- Angular 8 example: Refer the repo katex-expression-ng
Note: Katex css, js, & fonts are bundled in this package. You can skip including them in your application. Please refer package.json for KaTeX version.
Usage
Basic
Use the <katex-expression> tag anywhere in your html. Set the expression attribute to the katex expression.
<katex-expression expression='\int \dfrac{(log\ x)^3}{x}\ dx'>
</katex-expression>KaTeX Options
katex-options accepts a json str for KaTeX rendering options. Refer KaTeX API Options for more information. Example usage for katex-options:
<katex-expression
expression='\int \dfrac{(log\ x)^3}{x}\ dx'
katex-options='{ "displayMode": true , "throwOnError": true }'>
</katex-expression>Error Handling
Error objects are emitted via the onError event. Handle this event to re-throw, pipe exceptions to Sentry or elsewhere. Example non-JSX usage below:
<katex-expression
id="expression"
expression='\gte'
katex-options='{ "displayMode": true , "throwOnError": true }'>
</katex-expression>
<script>
const element = document.querySelector('#expression');
element.addEventListener('onError', error => {
console.error('<katex-expression> error:', error)
})
</script>Note: Katex errors are emitted if
katex-options.throwOnErroris true. Other exceptions are emitted by default.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
expression |
expression |
katex expression to render | string |
undefined |
katexOptions |
katex-options |
Katex options json | string |
undefined |
Events
| Event | Description | Type |
|---|---|---|
onError |
Emits Error object on exception |
CustomEvent<any> |
License
<katex-expression>is licensed under the MIT License.