KaTeX Expression

A web component/custom element () to render KaTeX expressions.


Table of Contents

- Installation
- HTML
- React/Angular/Vue
- Usage
- Basic
- Katex Options
- Error Handling
- Properties
- Events

Installation

$3

Insert the following script tags in the section of your html

``html


`

$3

Install 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

$3

Use the tag anywhere in your html. Set the expression attribute to the katex expression.

`html


`

$3

katex-options accepts a json str for KaTeX rendering options. Refer KaTeX API Options for more information. Example usage for katex-options:

`html
expression='\int \dfrac{(log\ x)^3}{x}\ dx'
katex-options='{ "displayMode": true , "throwOnError": true }'>

`

$3

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:

`html
id="expression"
expression='\gte'
katex-options='{ "displayMode": true , "throwOnError": true }'>



`

> Note: Katex errors are emitted if katex-options.throwOnError is 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 |

License

`is licensed under the MIT License.