Skip to content

navsgh/katex-expression

Repository files navigation

KaTeX Expression

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

npm stencil Published on webcomponents.org

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

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.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<any>

License

<katex-expression>is licensed under the MIT License.