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.
npm install --save temml temml-custom-element
You may also want to download a math font.
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);
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>
<la-tex>
parses its own text content and renders it to a
MathML markup which the browser understands and will display
the equation.
- default: The LaTeX expression.
All available options to temml.render
are reflected
as both properties and attributes except displayMode
, errorColor
and xml
, with the additional:
-
display
: Eitherblock
orinline
(defaults toinline
). Passblock
if you want to render withdisplayMode: true
. -
macros
: Just the stringpersist
(defaults to nothing). Passpersist
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.
- Use macros defined in
-
trust
is a boolean attribute or a function property reflecting the same temml option.
-
math
: The rendered<math>
element in the output. -
error
: The error text if the LaTeX expression fails to parse.
-
--la-tex-error-color
: The color of error text (both failed commands and::part(error)
). Same as theerrorColor
option to temml render.
An invissible element that won’t render any content. Used to define
macros and colors for la-tex elements with <la-tex macros="persist">
.
-
default
: The macro definitions to be used in<la-tex macros="persist">
elements.