Temml Custom Element

A Custom element wrapper around Temml

This library provides two custom elements <la-tex> and <la-tex-preample> to include LaTeX expressions in your HTML document but display the math equation.

Install

npm install --save temml temml-custom-element

You may also want to download a math font.

Usage

import "temml-custom-element";

<la-tex-preample>
  \def\E{\mathbb{E}}
  \newcommand\d[0]{\operatorname{d}\!}
</la-tex-preample>

<la-tex display="block" macros="persist">
  \E[X] = \int_{-\infty}^{\infty} xf(x) \d{x}
</la-tex>

If you want to register the custom elements under different names the classes are available as seperate modules:

import LaTexElement from "temml-custom-element/la-tex-element.js";
import LaTexPreampleElement from "temml-custom-element/la-tex-preample-element.js";

customElements.define("temml-math", LaTexElement);
customElements.define("temml-preample", LaTexPreampleElement);

With importmap

Download (or link to) the module assets. Note that if you are using the unbundled module you have to add temml as a peer dependency in the import map (under scopes in the example below). If you are using the bundled module you can omit the scopes below.

Replace /path/to with the location of the modules.

<script type="importmap">
  {
    "imports": {
      "temml-custom-element": "/path/to/temml-custom-element.js"
    },
    "scopes": {
      "/path/to/temml-custom-element.js": {
        "temml": "/path/to/temml/dist/temml.mjs",
        "temml/": "/path/to/temml/"
      }
    }
  }
</script>

<script type="module">
  import "temml-custom-element";
</script>

<la-tex>\sin \theta</la-tex>

Elements

<la-tex>

<la-tex> parses its own text content and renders it to a MathML markup which the browser understands and will display the equation.

Slots

• default: The LaTeX expression.

Attributes and properties

All available options to temml.render are reflected as both properties and attributes except displayMode, errorColor and xml, with the additional:

• display: Either block or inline (defaults to inline). Pass block if you want to render with displayMode: true.
• macros: Just the string persist (defaults to nothing). Pass persist if you want to either:
  • Use macros defined in <la-tex-preample> or with \gdef
  • Define a new macro with \gdef to be used by other <la-tex> instances.
• trust is a boolean attribute or a function property reflecting the same temml option.

CSS Shadow Parts

• math: The rendered <math> element in the output.
• error: The error text if the LaTeX expression fails to parse.

CSS Custom Properties

• --la-tex-error-color: The color of error text (both failed commands and ::part(error)). Same as the errorColor option to temml render.

<la-tex-preample>

An invissible element that won’t render any content. Used to define macros and colors for la-tex elements with <la-tex macros="persist">.

Slots

• default: The macro definitions to be used in <la-tex macros="persist"> elements.