Demo

Write and render math expressions.

This component is using Katex to renders these.

Table of contents

Showcase

f(x)=f^(ξ)e2πiξxdξ% \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';

Loader

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)

See the Katex documentation for more information.

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-padding8pxPadding
--deckgo-math-border-radiusBorder radius
--deckgo-math-margin0pxMargin
--deckgo-math-directionDirection
--deckgo-math-text-alignText alignment
--deckgo-math-container-displayblockContainer display
--deckgo-math-container-justify-contentContainer justify-content attribute
--deckgo-math-container-flex-directionContainer flex-direction attribute
--deckgo-math-container-align-itemsContainer align-items attribute
--deckgo-math-scrollscrollScroll property of the expression(s)
--deckgo-math-font-sizeFont size property of the expression(s)
--deckgo-math-min-height23pxMinimal height property of the expression(s)
--deckgo-math-displayblockDisplay property of the expression(s)
--deckgo-math-code-empty-text"Click to add your math expression"Place holder in case editable is set to true