@navsnpm/katex-expression NPM

KaTeX Expression

A web component/custom element (<katex-expression>) to render KaTeX expressions.

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

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>