Demo

Write and render math expressions.

This component is using Katex to renders these.

Showcase

$% \f is defined as f(#1) using the macro \f{x} = \int_{-\infty}^\infty \hat \f\xi\,e^{2 \pi i \xi x} \,d\xi$
% \f is defined as f(#1) using the macro \f{x} = \int_{-\infty}^\infty \hat \f\xi\,e^{2 \pi i \xi x} \,d\xi

Installation

This component could be added to your web application using the following methods.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/math@latest/dist/deckdeckgo-math/deckdeckgo-math.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/math@latest/dist/deckdeckgo-math/deckdeckgo-math.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/math

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/math';

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/math/dist/loader'; deckDeckGoElement();

Usage

The "Math" Web Component could be integrated using the tag <deckgo-math/>.

<deckgo-math> <code slot="math">% \f is defined as f(#1) using the macro \f{x} = \int_{-\infty}^\infty \hat \f\xi\,e^{2 \pi i \xi x} \,d\xi</code> </deckgo-math>

It either supports a single expression, as displayed above, or expressions within paragraphs.

<deckgo-math editable="true"> <code slot="math"> You can write math expression inside paragraph like this: $x + 1$ Inline formulas can be written with \$e.g:$c = \pm\sqrt{a^2 + b^2}$and displayed equations can be written using \$ e.g: $\sum_{i=1}^n 2^i$ </code> </deckgo-math>

Slots

The expressions have to be provided using the slot math.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
macrosstring{"\\f":"f(#1)"{A collection of custom macros. Each macro is a property with a name like \name (written "\name" in JavaScript) which maps to a string that describes the expansion of the macro, or a function that accepts an instance of MacroExpander as first argument and returns the expansion as a string.
editablebooleanfalseTo set the component has being editable (contenteditable will be applied on the slot on click)

Events

The <deckgo-math/> component triggers the following event.

EventDescriptionType
mathDidChangeEmit the host element when modified.CustomEvent<HTMLElement>

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--deckgo-math-colorinheritColor
--deckgo-math-backgroundBackground
--deckgo-math-code-empty-text"Click to add your math expression"Place holder in case editable is set to true