MathLive Mathfield

https://mathlive.io/mathfield
Admin
MathLive Mathfield is an open-source, flexible, and accessible web editor for writing and rendering...
Tokens:70,352
Snippets:873
Trust Score:7.4
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Mathlive dependency

Source: https://mathlive.io/mathfield/guides/svelte

Install the Mathlive package as a development dependency.

```bash
$ npm install --save-dev mathlive
```

--------------------------------

### Styled Enclose Examples

Source: https://mathlive.io/mathfield/reference/commands

Examples demonstrating the use of styles like background color and borders with \enclose.

```latex
\\enclose{updiagonalstrike roundedbox}[1px solid red, mathbackground="#fbc0bd"]{x=0}
```

```latex
\\enclose{circle}[mathbackground="#fbc0bd"]{\\frac1x}
```

```latex
\\enclose{roundedbox}[1px dotted #cd0030]{\\frac{x^2+y^2}{\\sqrt{x^2+y^2}}}
```

--------------------------------

### Enclose Notation Examples

Source: https://mathlive.io/mathfield/reference/commands

Examples of various notation types supported by the \enclose command.

```latex
\enclose{box}{x=0}
```

```latex
\enclose{roundedbox}{x=0}
```

```latex
\enclose{circle}{x=0}
```

```latex
\enclose{top}{x=0}
```

```latex
\enclose{left}{x=0}
```

```latex
\enclose{bottom}{x=0}
```

```latex
\enclose{right}{x=0}
```

```latex
\enclose{horizontalstrike}{x=0}
```

```latex
\enclose{verticalstrike}{x=0}
```

```latex
\enclose{updiagonalstrike}{x=0}
```

```latex
\enclose{downdiagonalstrike}{x=0}
```

```latex
\enclose{updiagonalarrow}{x=0}
```

```latex
\enclose{phasorangle}{x=0}
```

```latex
\enclose{radical}{x=0}
```

```latex
\enclose{longdiv}{x=0}
```

```latex
\enclose{actuarial}{x=0}
```

```latex
\enclose{madruwb}{x=0}
```

--------------------------------

### Define Keybinding Objects

Source: https://mathlive.io/mathfield/api

Examples of keybinding configurations using key combinations and commands.

```javascript
{
     "key": "cmd+a",
     "command": "selectAll",
},
{
     "key": 'ctrl+[Digit2]',
     "ifMode": 'math',
     "command": ['insert', '\\sqrt{#0}'],
}
```

--------------------------------

### LaTeX Matrix Environments

Source: https://mathlive.io/mathfield/matrix

Examples of various LaTeX matrix environments supported by MathLive.

```latex
\begin{matrix}
  a & b \\
  c & d
\end{matrix}
```

```latex
\begin{pmatrix}
  a & b \\
  c & d
\end{pmatrix}
```

```latex
\begin{bmatrix}
  a & b \\
  c & d
\end{bmatrix}
```

```latex
\begin{Bmatrix}
  a & b \\
  c & d
\end{Bmatrix}
```

```latex
\begin{vmatrix}
  a & b \\
  c & d
\end{vmatrix}
```

```latex
\begin{Vmatrix}
  a & b \\
  c & d
\end{Vmatrix}
```

```latex
\begin{smallmatrix}
  a & b \\
  c & d
\end{smallmatrix}
```

```latex
\begin{array}{cc}
  a & b \\
  c & d
\end{array}
```

--------------------------------

### Install MathLive via NPM

Source: https://mathlive.io/mathfield/guides/integration

Use this command to add the MathLive package to your project dependencies.

```bash
$ npm install --save mathlive
```

--------------------------------

### Vanilla HTML integration

Source: https://mathlive.io/mathfield/guides/getting-started

A complete example showing how to include the library and listen for input events on a math-field element.

```html
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>untitled</title>
  <script defer src="https://cdn.jsdelivr.net/npm/mathlive"></script>
</head>

<body>
  <math-field id="mf">x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}</math-field>
  <script>
    mf.addEventListener('input', evt =>
      console.log('Value:', evt.target.value)
    );
  </script>
</body>

</html>
```

--------------------------------

### Import MathLive in JavaScript

Source: https://mathlive.io/mathfield/guides/integration

Initialize a MathfieldElement after installing the package via NPM.

```javascript
import { MathfieldElement } from "mathlive";
const mfe = new MathfieldElement();
```

--------------------------------

### Complex Chemical Reaction Examples

Source: https://mathlive.io/mathfield/reference/commands

Advanced examples demonstrating reaction arrows and nested math expressions.

```latex
<Latex value="\ce{CO2 + C -> 2 CO}"/>
<Latex value="\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}"/>
<Latex value="\ce{$K = \ce{\frac{[Hg^2+][Hg]}{[Hg2^2+]}}$}"/>
<Latex value="\ce{Hg^2+ ->[I-]  $\underset{\mathrm{red}}{\ce{HgI2}}$  ->[I-]  $\underset{\mathrm{red}}{\ce{[Hg^{II}I4]^2-}}$}"/>
```

--------------------------------

### Live math-field playground

Source: https://mathlive.io/mathfield/guides/getting-started

An interactive example of a math-field element.

```html
<math-field>
    x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}
</math-field>
```

--------------------------------

### Implement Multi-line Math Environments

Source: https://mathlive.io/mathfield/changelog

Examples of using multi-line environments within a math-field element.

```html
<math-field>\displaylines{x=1 \\y = 2}</math-field>
```

```html
<math-field>\begin{align}
  f(0) &= 1 \\
  f(x + 1) &= f(x-1) + f(x)
\end{align}
</math-field>
```

--------------------------------

### Programmatic Mathfield Creation

Source: https://mathlive.io/mathfield/api

Example demonstrating how to create, configure, and mount a mathfield element to the DOM.

```javascript
let mfe = new MathfieldElement();

// Set initial value and options
mfe.value = "\\frac{\\sin(x)}{\\cos(x)}";

// Options can be set either as an attribute (for simple options)...
mfe.setAttribute("letter-shape-style", "french");

// ... or using properties
mfe.letterShapeStyle = "french";

// Attach the element to the DOM
document.body.appendChild(mfe);
```

--------------------------------

### LaTeX Set Notation Example

Source: https://mathlive.io/mathfield/reference/commands

Displays a set definition using the \Set macro.

```latex
\Set{ x\in\mathbf{R}^2 \;\middle|\; 0<{|x|}<5 }
```

--------------------------------

### MathfieldElement.placeholder

Source: https://mathlive.io/mathfield/api

Gets or sets the placeholder LaTeX string.

```APIDOC
## MathfieldElement.placeholder

### Description
A LaTeX string displayed inside the mathfield when there is no content.

### Signature
`get placeholder(): string`
`set placeholder(value: string): void`
```

--------------------------------

### VirtualKeyboardInterface.layouts

Source: https://mathlive.io/mathfield/api

Gets or sets the keyboard layouts, which consist of one or more layers.

```ts
get layouts(): readonly (
  | VirtualKeyboardLayout
  | VirtualKeyboardName)[]
set layouts(value: 
  | VirtualKeyboardLayout
  | VirtualKeyboardName
  | readonly VirtualKeyboardLayout | VirtualKeyboardName[]
  | VirtualKeyboardLayout | VirtualKeyboardName[]): void
```

--------------------------------

### Configure Accessibility for Web Components

Source: https://mathlive.io/mathfield/guides/static

Examples of auto-generated ARIA labels, custom labels, and enabling keyboard navigation.

```html
<!-- Auto-generated accessibility -->
<math-span>E = mc^2</math-span>

<!-- Custom ARIA label (preserved) -->
<math-span aria-label="Einstein's mass-energy equivalence">E = mc^2</math-span>

<!-- Keyboard navigable -->
<math-div tabindex="0">\int_0^1 f(x) dx</math-div>
```

--------------------------------

### Configure Mathfield Editing Options

Source: https://mathlive.io/mathfield/guides/customizing

Example of setting editing attributes directly on the math-field element.

```html
<math-field smart-mode>
    x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}
</math-field>
```

--------------------------------

### MathfieldElement.mathVirtualKeyboardPolicy

Source: https://mathlive.io/mathfield/api

Gets or sets the policy for the virtual keyboard.

```ts
get mathVirtualKeyboardPolicy(): VirtualKeyboardPolicy
set mathVirtualKeyboardPolicy(value: VirtualKeyboardPolicy): void
```

--------------------------------

### Standard math environments

Source: https://mathlive.io/mathfield/reference/commands

Basic math, displaymath, equation, subequations, and eqnarray environments.

```latex
\begin{math}
  x+\frac12
\end{math}
```

```latex
\begin{displaymath}
  x+\frac12
\end{displaymath}
```

```latex
\begin{equation}
  x+\frac12
\end{equation}
```

```latex
\begin{subequations}
  x+\frac12
\end{subequations}
```

```latex
\begin{eqnarray}
  x+\frac12
\end{eqnarray}
```

--------------------------------

### MathfieldElement.popoverPolicy

Source: https://mathlive.io/mathfield/api

Gets or sets the popover display policy.

```APIDOC
## MathfieldElement.popoverPolicy

### Description
If "auto", a popover with suggestions may be displayed when a LaTeX command is input.

### Signature
`get popoverPolicy(): "auto" | "off"`
`set popoverPolicy(value: "auto" | "off"): void`
```

--------------------------------

### MathfieldElement.placeholderSymbol

Source: https://mathlive.io/mathfield/api

Gets or sets the symbol used for placeholders.

```APIDOC
## MathfieldElement.placeholderSymbol

### Description
The symbol used to represent a placeholder in an expression. Default is U+25A2.

### Signature
`get placeholderSymbol(): string`
`set placeholderSymbol(value: string): void`
```

--------------------------------

### MathfieldElement.position

Source: https://mathlive.io/mathfield/api

Gets or sets the position of the caret/insertion point.

```APIDOC
## MathfieldElement.position

### Description
The position of the caret/insertion point, from 0 to lastOffset.
```

--------------------------------

### initVirtualKeyboardInCurrentBrowsingContext()

Source: https://mathlive.io/mathfield/api

Initializes the virtual keyboard to appear within the current browsing context, rather than defaulting to the top-level window.

```APIDOC
## initVirtualKeyboardInCurrentBrowsingContext()

### Description
Initialize the virtual keyboard so that it appears in the current browsing context. By default, it would only appear in the top-level window.

### Signature
`function initVirtualKeyboardInCurrentBrowsingContext(): VirtualKeyboard`
```

--------------------------------

### MathfieldElement.mathVirtualKeyboardPolicy

Source: https://mathlive.io/mathfield/api

Sets or gets the policy for the virtual keyboard display.

```APIDOC
## MathfieldElement.mathVirtualKeyboardPolicy

### Description
Controls the visibility policy of the math virtual keyboard.

### Property
`mathVirtualKeyboardPolicy: VirtualKeyboardPolicy`
```

--------------------------------

### Configure MathLive asset directories

Source: https://mathlive.io/mathfield/guides/integration

Sets the relative path for font and sound assets to ensure correct rendering and audio feedback.

```js
MathfieldElement.fontsDirectory = "../assets/mathlive-fonts";
```

--------------------------------

### MathfieldElement.letterShapeStyle

Source: https://mathlive.io/mathfield/api

Gets or sets the letter shape style configuration.

```APIDOC
## MathfieldElement.letterShapeStyle

### Description
Controls the letter shape style (e.g., "auto", "tex", "iso", "french", "upright").

### Signature
`get letterShapeStyle(): "auto" | "tex" | "iso" | "french" | "upright"`
`set letterShapeStyle(value: "auto" | "tex" | "iso" | "french" | "upright"): void`
```

--------------------------------

### Introduction Section Styling

Source: https://mathlive.io/mathfield

CSS rules for the main introduction header, including font sizing, keyframe animations, and selection styling.

```css
h1 span.third-part {
  font-size: 120px; letter-spacing: -8px;
  /* animation-delay: .4s; */
  /* animation: 0.5s zoom-in-zoom-out 1s ease; */
}


@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(0, 0);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}



h1::selection, h1 span::selection {
  -webkit-text-fill-color: #000;
  background: #abd;
  background-clip:inherit;
  -webkit-background-clip: inherit;
  -moz-background-clip: inherit;
}
```

--------------------------------

### MathfieldElement.environmentPopoverPolicy

Source: https://mathlive.io/mathfield/api

Gets or sets the policy for displaying the environment popover.

```APIDOC
## MathfieldElement.environmentPopoverPolicy

### Description
If "auto", a popover with commands to edit an environment (matrix) is displayed when the virtual keyboard is displayed.

### Signature
`get environmentPopoverPolicy(): "auto" | "off" | "on"`
`set environmentPopoverPolicy(value: "auto" | "off" | "on"): void`
```

--------------------------------

### MathfieldElement.defaultMode

Source: https://mathlive.io/mathfield/api

Gets or sets the default mode of the element when empty.

```APIDOC
## MathfieldElement.defaultMode

### Description
The mode of the element when it is empty. Options include "math", "inline-math", or "text".

### Signature
`get defaultMode(): "text" | "math" | "inline-math"`
`set defaultMode(value: "text" | "math" | "inline-math"): void`
```

--------------------------------

### Physics Braket Notation Commands

Source: https://mathlive.io/mathfield/reference/commands

Commands for rendering quantum mechanical braket notation.

```latex
<Latex value='\bra{\Psi}' flow="column"/>
  <Latex value='\ket{\Psi}' flow="column"/>
  <Latex value='\braket{ab}' flow="column"/>
  <Latex value='\Bra{ab}' flow="column"/>
  <Latex value='\Ket{ab}' flow="column"/>
  <Latex value='\Braket{ab}' flow="column"/>
```

--------------------------------

### MathfieldElement.selection

Source: https://mathlive.io/mathfield/api

Gets or sets the selection ranges within the mathfield.

```APIDOC
## MathfieldElement.selection

### Description
An array of ranges representing the selection.
```

--------------------------------

### Configure Web Component Attributes and Programmatic Rendering

Source: https://mathlive.io/mathfield/guides/static

Demonstrates various formats, display modes, and manual re-rendering of web components.

```html
<!-- AsciiMath format -->
<math-span format="ascii-math">x^2 + y^2</math-span>

<!-- MathJSON format -->
<math-div format="math-json">["Add", "x", "y"]</math-div>

<!-- Override display mode -->
<math-span mode="displaystyle">\sum_{i=1}^n i^2</math-span>

<!-- Custom letter shape style -->
<math-div letter-shape-style="iso">f(x) = ax + b</math-div>

<!-- Programmatic rendering -->
<math-div id="formula">x + y</math-div>
<script type="module">
  const formula = document.getElementById('formula');
  formula.textContent = 'x^2 + y^2 = z^2';
  formula.render(); // Manually trigger re-render
</script>
```

--------------------------------

### MathfieldElement.value

Source: https://mathlive.io/mathfield/api

Gets or sets the content of the mathfield as a LaTeX expression.

```APIDOC
## MathfieldElement.value

### Description
The content of the mathfield as a LaTeX expression.
```

--------------------------------

### Configure sounds directory

Source: https://mathlive.io/mathfield/guides/customizing

Sets the base URL or path where the mathfield looks for audio assets.

```js
MathfieldElement.soundsDirectory = 
  "https://cdn.jsdelivr.net/npm/mathlive/sounds/";
```

--------------------------------

### Manage MathfieldElement.mode

Source: https://mathlive.io/mathfield/api

Gets or sets the current parsing mode of the mathfield.

```ts
get mode(): ParseMode
set mode(value: ParseMode): void
```

--------------------------------

### Load MathLive via CDN

Source: https://mathlive.io/mathfield/guides/getting-started

Include the MathLive library in your HTML document using a script tag. Use either the jsDelivr or unpkg CDN.

```html
<script defer src="https://cdn.jsdelivr.net/npm/mathlive"></script>
```

```html
<script defer src="https://unpkg.com/mathlive"></script>
```

--------------------------------

### MathfieldElement.maxMatrixCols

Source: https://mathlive.io/mathfield/api

Gets or sets the maximum number of columns for the matrix environment.

```APIDOC
## MathfieldElement.maxMatrixCols

### Description
Sets the maximum number of columns for the matrix environment. Default is 10.

### Signature
`get maxMatrixCols(): number`
`set maxMatrixCols(value: number): void`
```

--------------------------------

### MathfieldElement.mathModeSpace

Source: https://mathlive.io/mathfield/api

Gets or sets the LaTeX string inserted when the spacebar is pressed.

```APIDOC
## MathfieldElement.mathModeSpace

### Description
The LaTeX string to insert when the spacebar is pressed. Default is an empty string.

### Signature
`get mathModeSpace(): string`
`set mathModeSpace(value: string): void`
```

--------------------------------

### VirtualKeyboardInterface.show()

Source: https://mathlive.io/mathfield/api

Shows the virtual keyboard, optionally with an animation.

```ts
show(options?): void
```

--------------------------------

### Manage MathfieldElement value

Source: https://mathlive.io/mathfield/api

Get or set the LaTeX content of the mathfield.

```ts
get value(): string
set value(value: string): void
```

```js
document.querySelector('mf').value = '\\frac{1}{\\pi}'
```

--------------------------------

### MathLive SvelteLab Integration

Source: https://mathlive.io/mathfield/guides/svelte

This link points to a live SvelteLab environment containing the source code for a Svelte application using MathLive.

```text
https://www.sveltelab.dev/?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte#code=N4IgdA5glgLlEDsD2AnApiAXKAZlANhtiAMZIIxoUDOWoA1lAgCZYjUBua%2Bl%2BAhgCMAtAFcoADj4gANCAEicONCiwBtACwA2aZvHTxAZmkBOAKz6jARkvbrl6dfUOADPcvOH7z2%2Bcf39sxdjbxc-SwB2Fz1-T3MvdUjjaIiXOOdo3xdpBOzbSzjLDJ9k21dstMj3AtLsyssAJhNE4PdEyucrMvjSty9rDNyXXrC9LWzGrwMjMZjrEcHZ%2Bo9jdpaGqKGs-tTPHsHjNeGXCec06dK88xmbHfcWrvzdpqDPRvUrk88M6s2xg5C5sdbh0FjdrFc8qU0vdej8Vi9rG8Pi4ALoAXwxsjAAAd0DA4MoUCQ6CA8IQSWQKFQYLRiIwWGxONxeIJRBIpLJ5IplGoGp0TNIDE5rHU0vZxE54UlYoKnKY9AYJmDLMKUjF1MLlrKZVVPH4Qe4ivpenVenshdJ5YKlXlVe17BqssELdZbc9dYbbn0QZpTQjnMF4RarYrtYC7HrNhbHV5naqlZqCmFtOJ2mlky4nMGFW9gupRqNNQKXetPSKXJ0kzLs9aTPYSwnNq6nh6Hk53q8NuX3JXIx3wV8m%2BkW2ULcZpkW4wDCk2VZ5E6FZ%2BYa6HjG56kZQy7nCc0kaByvGtG3pdB7Nh82YtGs0fVb0bV6jge5TmHBvaw33XOB7M54ew482zniUUY3m%2By4TPU5jjlsUGohiaKyNifAkPQfAQGgYAAFbUOQJJkkQoCUpQNAkvSrCYOwXA8NwrJiJIMhyAoSgqJgqh8k6AHLKsoGWq%2BY56PCP6nCYU4xlqJb7t%2BgEiRGgL-tGozaPmgzqGJk4AY2HozkJYKji%2BtaXtJ9rZBpJbQWsC6Ii2jz-hxsbFpq%2Bq9AqBlbqq3wjvWJzOYO16cVO0rdrJF6ZApHleuajRBWqIUZB4-kOVO1mOLOnm-lOIa3mesl6d5napb%2B6UPOpAVhqFVbNuFBXfg8kLAr0YEdh2-zuJqAT3JEoZjIlWrJTu06aoGdTaNVKW1WaI5ivOtbNQUlmRVGJ7lQKDRXGZTlpToUknE%2BmS-ss9zTc%2BfGGe%2BSXapoqoFPuF55S4p45EJmS6Q%2Bv7ttBdQjSE1XGHKDrKUp2SuaZZUWldOozsBXkPTKOStItv1yh4YymOcloeKYy7thpU4Qz%2BUNdHdezuI9dTpfd-alnd7S9oCVM3UOIFXm52V-Za6MqWMKm9QKyWlhNNlQrOWas9q7OmADlpS6YCU42D8Yzb%2B9Wto15QFTTFZeijBSM9Dl76ad7kmP9gyy2bougxd5k5cUMNIxz2riXzAEU%2BaYtjnK7aA6pIMOWtVsSaqtj1PevFZeVhyLsFRq8-1vkpQ8%2BoJ7GR1LtqEf2X1kdfqUmoU7HHuSu2QNqcDlrLebceOZDt3M2ULX3O1okuF1RcmxXvtd9uq1wX0ffOOimLsESJLMFA6AkDAqAAJ4knw2LYmAAAWMAALb4PhBCEaQ5AkTSZFMBRVHMrRwj0RyTHcqxqiaAlnRhB1Lahxr%2BVtSO9x6Jonx35mH8bKGT0ul9RGE0PWZu8knDf04r%2Bd%2BMRnoeGgRdWBAZZzaCDNFJuX5rpoJ0OAzw313BIktKNJqkQkHZxQRTfUXUtJEy%2vg3UrVrCRgtIA5wqoIEDTAdqAwopbZdnugjbSyl0H8OEpNA8kR4YDV0p5ZhRxrhKhAbwt45DPiBh0PqGETwMGRmejonhkkGqeDWEqNWVUwIKMjAbJ8NwjGqjTu4DM78eHOK2kwnRVMnH7T0pbbq6iwbiMJnbWxrdFozA4ZsBBgp2gCl-jI5uMSKHxOWMkHwfgX7sO4ro6RusBFliEc4NMTwqZ0NCSwmJ%2BYXrfXhA4v%2BckQkzXBho1J0dcqvgJiHUJZR6nuO0gUE4glKgvwjtY8MQi%2BjKmxjoI8wS64w2EblURJh0nRyyeQlG7R9SMxScEBJiQ1n9Jfikg5DS9Kf1mfBYe%2BAoACDHhPNAU9Z4kgALJ8BgMvAAYlAbgzAwBMholvckxBiLUlpAwI%2BjJqIsnPuyRiXIWJqFgY8ZhVkBajSGV%2BFRfTpmXU%2BFuXcCIBYWJuMbO4ucGkVQEcGe4H4iUUvGqSzFz8w5XkgpuRo4Q2gjk1Ay%2Bhi5NCXPPDoiZykwLcspXAgaqsuyZCFXKnwoqpnaE0D8IyC4YqEIeBBcChkZXSSVR%2BIaUqollg6eHOlhLgRmMGk8QB75AEsPkpBXVRClbOtQeSwCTTCl7BkS5WcLjbJyjpZMI8b0X6J3yuIMId4aq6qMRywyOl2jJBMpoIwmcfVum0ioh1uqDCvljdgqa7phy%2B0lbpPOQJZXmsQcKomyqMxqqFkrESWrFmPGgaYMNCUI2Kvtcmp1wzBEmVDEmwU6DqGLilBkI06gUYOiais64ECc1nXMBHEthVnUC0TflAweQtJ7qVFcJdlo%2B30pbo0sIPx2GVWWbWSdi6bGet8hHKt2q%2BUmPrToRtRqDqlPyjw6BDr%2BTWsgyTGVMGn7NlfQhkD9gwPJvDdeyD%2BKB2vu2M9dNvw35TIyb8PIo7CnjsaJOnDaaCGbF7VkDDm7sj2Do2hhjR6hwnF2jem4CGL0TuQwOrO6GB3WsKnVGju7%2B3ThRmER%2B7Tl3Gu1jVb6-lup8YowJs6EGRM6eE4OXDEnRwaZTXJ-pDcSPlrwzEFjUm2OCbguoZjVrdMFqY5e%2Bj9mt10rOQONFXoHwpK8Cg4avL1burraFKT3YZLMZnSIrTqkVlidhM-cw0CfOoOrX-ap-KemIPqEPRCIAj5oAAB7YQhaSbeFI97gsPgySigLYVsgYpyZiPI2I5ByE6rFUodHsP5VJN1Ua920NMdiodNk34hVtY04OKaa27pNFrd%2BTrFtGZMKNUo8jBIsoM0w-hD7WFvTNblN1Bq8siwWIPBCw8UBIBEJQSr49J7TxQHPYgABqfgM8HswABTCneBEatUlInSKFjXAf8Dha1q%2BSK2Ioosu2wZTw9k2pqsyj8eZlK00EQEUjw4-hrHyQYYINmBRdbeAO-GYIRtcfA2%2BIwrVTt7mjoLQEmajb8tm3u%2Bbr7Se1yZvbPMUtDA2NykqLjl4%2B5wW6mozi5rJoM9XFg1s8V21HFc-xj8x6PVsseIh9zQWtkyj89pALnx%2B6gM4UG%2BTzTMFUtZ-09nQXOYXoDu4QrshPvIQwgD0%2BwKd5grB5ChrJ8aLQ5a5fRFHXb53u4%2Bii3Hn9XQgxx6llX7QvhB2UL9xA29cvGNux810FRiREzwbJw2ff2RdBHrAVYTaVZB86iha5vUeW8QR4CvfjpDV4i%2Brp16qo2hWQ4wywPiXFRKtGXLmCo261FmV7kAEB8BIAEHwfAYASDUEq8D0FtWQ8gHItC0%2BkeL4IvazfK0S3pwsqE3mK4%2BSEYtVHczvJf8I7mxUqYUNnE5o6jFLqzSh9bhIdiSxhZmoyR6Bf50qP5hYyQf4gHNBgFXBk6dJQGs4IaFizTz6gzdR5gFixJubk7wEMyoGrLPDv7qzmyZyYEbDYH4FvB4GOgEHlw8zSJOb-5P6AFIFv6dQ0Gxb6o4Keivrf4wHyyhi-6dx8JMGWiRCmCjScFG5agAHCR8FUECHgGNB0EiGE6YwowSFyGmA6FzLGEKH1jKGkHqzkEv6l6aEUFoxc7nJYEGHlzSGsE6GGHEGeEkLlyyGOYqEU48HqEIEkxLClJoHOFwLQHZDeG%2BEcFyFlwQEBFcEORqGIFhFNgRHwZbqYwYF6GjDxFNQsFgS0HLhWFwE2HP5AFUzhEZjgFCHsKFFxEYydxcxlFKHGGmE%2BFpGqEhGZF1FUqAYNxRG6GAFFHZBk4TizSEH%2BHSJlFZqbiVHcEIEVBZHSojEOh5HRH0GiFuEmHsGdE%2BFlE9GpFBFkE1Ef6V5DheJbpNEnAtFiHeGHEJFzGJG%2BHSEpErHpEDHrE5bSZPARwC7hBrBSSKy6Qk55hNSfQ1RYrqjP4jbqpNpyGaDbZKYIyZ7-Bi4NApZhIUr957oNFgQC44lExWCeoxrmDhCbjQm1jiDmKUGNJ5AKahiglviZI%2BCdCKJgTiD2HRbBoLFlS%2BgTbNi6RcLzpyEgk56pR6Ji7ALVh0lbj7LJDxqthSbyl1Dx4C6%2BEglS53RSTCz-B6LhBSTjpKlnqikG41EWIhQ6FVEZH-FpCMliqQFRwTIPGCjBD965SShjaSq3o-QWnEp2J4nrCgHWZhoDzN4mrng556LYYCxcJS7SQ8HjJ3RqzkHM5cI6J0E5JibKEM4OQ36Gp34JYXSOkUHIE3q1FjEFETGtEdG4EnGzHzEkFVGXG8HAH8GOH5HCENmMEJGlGtmKG9EXHBFrFVk9l2HSy7FPHFHNkBFNRk5mGBHWGdmhGv4OEzmHHjHCSTFNndTDlSFuHnHrnVFdlbkRm1mOx7mxGDklEtlSHMFjnnmVkzn4k5E8Z1n9n7mNk4FHlPk6HSIsF9Euzvk3mfkNE7F3muFHGLlClSE%2BxnkdkXmbnInrjQWzmwUMELmAVLm1hfHLHtkK7RlJRHL7RZKobZzplHJzhZmq4onWYYH5m1QKFVEe6ZJpBOgUWcnll9TTlAE9gF4CmLiNwAgZkzTZqkb0U6yTkznVnUGNEkVJTumSWpTSWloIZ-EUFQWRFTEqVagUrikra5R9mAWoxbrckvDWHhZEn6XuoGLAjRCjKdKpozTaXyWQUXZvrKRgUhbGnNr6W0V2qaUmWeW2GQW94iq-BRFrlRlpCFa3ayDUAwAfJQDEjEAvZPJvYfa4B8AcAZXkA4gIAQCB4g77yVYn6Q5n50TwptbXxqAbgtBrg
```

--------------------------------

### Array Environment Formatting

Source: https://mathlive.io/mathfield/reference/commands

Demonstrates column alignment and vertical separator configurations for the array environment.

```latex
\begin{array}{lc}
  a + 1 & b  + 1 \\
  c & \frac{1}{d}
\end{array}
```

```latex
\begin{array}{l|c}
  a + 1   &   b  + 1 \\
  c       &   \frac{1}{d}
\end{array}
```

```latex
\begin{array}{l||c}
  a + 1   &   b  + 1 \\
  c       &   \frac{1}{d}
\end{array}
```

```latex
\begin{array}{l:c}
  a + 1   &   b  + 1 \\
  c       &   \frac{1}{d}
\end{array}
```

--------------------------------

### Configure MathfieldElement.computeEngine

Source: https://mathlive.io/mathfield/api

Sets or gets a custom compute engine instance for the mathfield.

```ts
get static computeEngine(): ComputeEngine
set static computeEngine(value: ComputeEngine): void
```

--------------------------------

### Integrate MathLive using JavaScript modules

Source: https://mathlive.io/mathfield/guides/integration

Use a module script to dynamically import MathLive from a CDN and render math content in the document.

```html
<!DOCTYPE html>
<html>
  <body>
    <p>$$\frac{\pi}{2}$$</p>
    <script type="module">
      window.addEventListener("DOMContentLoaded", () =>
        import("https://esm.run/mathlive").then((mathlive) =>
          mathlive.renderMathInDocument(),
        ),
      );
    </script>
  </body>
</html>
```

--------------------------------

### VirtualKeyboardInterface.connect()

Source: https://mathlive.io/mathfield/api

Connects the virtual keyboard instance.

```ts
connect(): void
```

--------------------------------

### MathfieldElement.minFontScale

Source: https://mathlive.io/mathfield/api

Gets or sets the minimum relative font size for nested elements.

```APIDOC
## MathfieldElement.minFontScale

### Description
Set the minimum relative font size for nested superscripts and fractions. Value should be between 0 and 1.

### Signature
`get minFontScale(): number`
`set minFontScale(value: number): void`
```

--------------------------------

### VirtualKeyboardCommands

Source: https://mathlive.io/mathfield/api

Methods for controlling the visibility and state of the virtual keyboard.

```APIDOC
## VirtualKeyboardCommands

### Methods
- **hideVirtualKeyboard()**: Hides the virtual keyboard.
- **showVirtualKeyboard()**: Shows the virtual keyboard.
- **switchKeyboardLayer(mathfield, layer)**: Switches the current keyboard layer.
- **toggleVirtualKeyboard()**: Toggles the visibility of the virtual keyboard.
```

--------------------------------

### MathfieldElement.soundsDirectory

Source: https://mathlive.io/mathfield/api

Sets the directory path for virtual keyboard audio files.

```APIDOC
## MathfieldElement.soundsDirectory

### Description
A URL fragment pointing to the directory containing the optional sounds used to provide feedback while typing.

### Property
`static soundsDirectory: string`
```

--------------------------------

### Intro Copy Container Layout

Source: https://mathlive.io/mathfield

Flexbox layout configuration for the intro-copy div and its child elements.

```css
div.intro-copy {
  display: flex;
  flex-flow: column;
  align-items: center;

  padding-top: 2rem;
  margin-inline: 0;
  margin-bottom: 1rem;

  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--content-background);
  color: var(--text-color);
}

div.intro-copy p {
  color: var(--text-color);
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.006em;
}

div.intro-copy p.p1 {
  font-size: 4rem;
  line-height: .8;
  letter-spacing: -0.03em;
}

div.intro-copy p.p2 {
  margin-top: 1rem;
  font-size: clamp(18px, 6vw, 2rem);
  line-height: .8;
}

div.intro-copy p.p3 {
  font-size: clamp(18px, 4vw, 1rem);
  color: var(--neutral-500);
  font-weight: 600;
  padding-inline: 1em;
}

div.intro-copy hr {
  width: 50%;
  margin: 1rem 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

div.intro-copy div {
  display: block;
  width: 100%;
  padding-inline: 10%;
}

@media only screen and (max-width: 767px) {
  div.intro-copy div {
    padding-inline: 8px;
  }
}

div.intro-copy kbd {
  font-family: var(--monospace-font);
  background: transparent;
  color: var(--primary-color);
  font-size: clamp(24px, 12vw, 1em);
  line-height: 1;
  border: none;
  box-shadow: none;
}
```

--------------------------------

### Get prompt value in MathfieldElement

Source: https://mathlive.io/mathfield/api

Returns the content of a placeholder command identified by its ID.

```ts
getPromptValue(placeholderId, format?): string
```

--------------------------------

### Generate Static Math Markup

Source: https://mathlive.io/mathfield/guides/integration

Demonstrates using convertLatexToMarkup to generate HTML for a LaTeX string and injecting it into the DOM. Requires the mathlive-static.css stylesheet for correct rendering.

```html
<!DOCTYPE html>
<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/mathlive/mathlive-static.css"
  />
</head>
<html>
  <body>
    <div id="formula"></div>
    <script type="module">
      window.addEventListener("DOMContentLoaded", () =>
        import("https://esm.run/mathlive").then((mathlive) => {
          document.getElementById("formula").innerHTML =
            mathlive.convertLatexToMarkup(
              `\\xrightarrow[\\Delta]{\\text{abcd}}`,
            );
        }),
      );
    </script>
  </body>
</html>
```

--------------------------------

### MathfieldElement.colorMap

Source: https://mathlive.io/mathfield/api

Gets or sets the mapping function for color names to CSS color values.

```APIDOC
## MathfieldElement.colorMap

### Description
Map a color name as used in commands such as `\textcolor{}{}` or `\colorbox{}{}` to a CSS color value. Use this to override standard color mappings.

### Signature
`get colorMap(): (name) => string`
`set colorMap(value: (name) => string): void`
```

--------------------------------

### Configure Virtual Keyboard Layouts

Source: https://mathlive.io/mathfield/guides/virtual-keyboard

Set the available keyboard layouts by modifying the mathVirtualKeyboard.layouts property.

```html
<math-field>x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}</math-field>
```

```js
document.querySelector('math-field').
  addEventListener('focus', () => { 
    mathVirtualKeyboard.layouts = ["numeric", "symbols"];
    mathVirtualKeyboard.visible = true;
  });
```

--------------------------------

### Get offset from viewport coordinates

Source: https://mathlive.io/mathfield/api

Calculates the nearest offset for a given (x, y) coordinate.

```ts
getOffsetFromPoint(x, y, options?): number
```

--------------------------------

### MathfieldElement.soundsDirectory

Source: https://mathlive.io/mathfield/api

Sets the directory path for virtual keyboard audio files.

```ts
get static soundsDirectory(): string
set static soundsDirectory(value: string): void
```

--------------------------------

### Define Offset Type

Source: https://mathlive.io/mathfield/api

Represents the caret position as an integer index starting from 0.

```ts
type Offset = number;
```

--------------------------------

### Define a Basic Keyboard Layout

Source: https://mathlive.io/mathfield/guides/virtual-keyboard

Configures a custom keyboard layout by assigning an object with rows of keycap definitions to mathVirtualKeyboard.layouts.

```js
mathVirtualKeyboard.layouts = {
  label: 'Basic',
  rows: [
    [
      '[7]', '[8]', '[9]', '[+]', 
      { label: '[separator]', width: 0.5 },
      { class: 'small', latex: '\\frac{#@}{#0}' },
      '\\varnothing', '\\infty', '\\in', '\\notin',
      '[separator]',
    ],
    [
      '[4]', '[5]', '[6]', '[-]', 
      { label: '[separator]', width: 0.5 },
      '[(]', '[)]', '\\lt', '\\le', '\\hat{=}', '[separator]',
    ],
    [
      '[1]', '[2]', '[3]', '\\cdot', 
      { label: '[separator]', width: 0.5 },
      '[', ']', '\\gt', '\\ge',

      { label: '[backspace]', width: 2 },
    ],
    [
      { label: '[0]', width: 2 }, '[.]', '\\colon', 
      { label: '[separator]', width: 0.5 },
      '\\lbrace', '\\rbrace', '=', '\\ne', '[left]', '[right]',
    ],
  ],
};
```

--------------------------------

### Create a basic fill-in-the-blank mathfield

Source: https://mathlive.io/mathfield/guides/fill-in-the-blank

Define an editable placeholder within a read-only mathfield using the \placeholder command.

```html
<math-field readonly>
  x=\placeholder[answer]{}
</math-field>
```

--------------------------------

### Import MathLive via ESM

Source: https://mathlive.io/mathfield/changelog

Use this import statement to load the MathfieldElement from the esm.run CDN.

```js
import { MathfieldElement } from "https://esm.run/mathlive";
```

--------------------------------

### Execute a command with parameters

Source: https://mathlive.io/mathfield/guides/commands

Passes a tuple containing the selector and arguments to the executeCommand method.

```js
mf.executeCommand(["insert", "(#0)"]);
```

--------------------------------

### Configure Head for Optimized Loading

Source: https://mathlive.io/mathfield/guides/integration

Include these styles and preload links in the document head to manage visibility and font loading priority.

```html
<!-- In the <head> section -->
<style>
  body {
    visibility: hidden;
  }
  body.ready {
    visibility: visible;
  }
</style>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_AMS-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Caligraphic-Bold.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Caligraphic-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Fraktur-Bold.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Fraktur-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Main-BoldItalic.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Main-Bold.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Main-Italic.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Main-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Math-BoldItalic.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Math-Italic.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_SansSerif-Bold.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_SansSerif-Italic.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_SansSerif-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Script-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Size1-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Size2-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Size3-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Size4-Regular.woff2"
/>
<link
  rel="preload"
  as="font"
  crossorigin
  href="../fonts/KaTeX_Typewriter-Regular.woff2"
/>
<link rel="stylesheet" href="../mathlive-fonts.css" />
```

--------------------------------

### Get prompt state in MathfieldElement

Source: https://mathlive.io/mathfield/api

Retrieves the current state and lock status of a specific prompt.

```ts
getPromptState(id): ["correct" | "incorrect", boolean]
```
Tokens:
Raw