https://github.com/navsgh/katex-expression

A web component to render KaTeX expression
https://github.com/navsgh/katex-expression

katex latex stenciljs stenciljs-components web-components

Last synced: about 1 month ago
JSON representation

A web component to render KaTeX expression

• Host: GitHub
• URL: https://github.com/navsgh/katex-expression
• Owner: navsgh
• License: mit
• Created: 2019-07-16T13:18:48.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-25T20:06:39.000Z (9 months ago)
• Last Synced: 2024-04-24T12:06:17.130Z (8 months ago)
• Topics: katex, latex, stenciljs, stenciljs-components, web-components
• Language: TypeScript
• Size: 538 KB
• Stars: 11
• Watchers: 0
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-stenciljs - Katex Expression

README

        


# KaTeX Expression

A web component/custom element (``) to render [KaTeX](https://katex.org/) expressions. 

[![npm](https://img.shields.io/npm/v/@navsnpm/katex-expression.svg)](https://www.npmjs.com/package/@navsnpm/katex-expression)

[![stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com/)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@navsnpm/katex-expression)

## Table of Contents

- [Installation](#installation)

	- [HTML](#html)

	- [React/Angular/Vue](#reactangularvue)

- [Usage](#usage)

	- [Basic](#basic)

	- [Katex Options](#katex-options)

	- [Error Handling](#error-handling)

- [Properties](#properties)

- [Events](#events)

## Installation

### HTML

Insert the following script tags in the `` section of your html

```html

```

### React/Angular/Vue

Install `` using npm

	

```

npm i --save @navsnpm/katex-expression

```

- Angular 8 example: Refer the repo [katex-expression-ng](https://github.com/navsgh/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](./package.json) for KaTeX version.

## Usage

### Basic 

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

```html

```

### KaTeX Options

`katex-options` accepts a json str for KaTeX rendering options. Refer [KaTeX API Options](https://katex.org/docs/options.html) for more information. Example usage for `katex-options`:

```html

```

### 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:

```html

  const element = document.querySelector('#expression');

  element.addEventListener('onError', error => { 

    console.error('<katex-expression> error:', error)

  })

```

> 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](http://opensource.org/licenses/MIT).