https://github.com/justinfagnani/katex-elements

Custom elements for easily using KaTeX
https://github.com/justinfagnani/katex-elements

Last synced: about 2 months ago
JSON representation

Custom elements for easily using KaTeX

• Host: GitHub
• URL: https://github.com/justinfagnani/katex-elements
• Owner: justinfagnani
• License: apache-2.0
• Created: 2015-04-07T17:48:01.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:17:42.000Z (almost 2 years ago)
• Last Synced: 2024-11-01T10:51:37.642Z (2 months ago)
• Language: TypeScript
• Size: 1.91 MB
• Stars: 24
• Watchers: 3
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-standalones - `<katex-display>`

README

        
# katex-elements

Web Components for easily using [KaTeX][katex] in HTML

[katex]: https://github.com/Khan/KaTeX

## Installation

```bash

> npm i katex-elements

```

## Usage

### 1. Import the elements

#### From HTML:

Import all the elements:

```html

```

Import each element individually:

```html

```

> _Note: the path to the JavaScript modules may depend on your npm installation_

#### From JavaScript:

Import all the elements:

```js

import {KatexDisplay} from 'katex-elements';

```

Import each element individually:

```js

import {KatexDisplay} from 'katex-elements/katex-expr.js';

import {KatexDisplay} from 'katex-elements/katex-display.js';

import {KatexInline} from 'katex-elements/katex-inline.js';

```

Note that this package uses "bare module specifiers" to import the `katex` package. You will need a server or bundler that resolves these specifiers to URLs that will work in a browser, such as Rollup or [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/).

### 2. Use the elements

## <katex-inline>

Renders its text content in inline mode.

### markup:

```html

c = \pm\sqrt{a^2 + b^2}

```

### output:



## <katex-display>

Renders its text content in display mode, which will put the math in display style (so `\int` and `\sum` are large, for example), and will center the math in a block element.

### markup:

```html

c = \pm\sqrt{a^2 + b^2}

```

### output:



## <katex-expr>

`` is the base class for `` and ``. It renders inline or display based on the `display-mode` attribute.

```html

c = \pm\sqrt{a^2 + b^2}

```