### Install Dependencies

Source: https://github.com/arnog/mathlive/blob/master/CONTRIBUTING.md

Installs all necessary Node modules for building and testing the MathLive SDK. Run this after cloning the repository.

```bash
cd mathlive
npm ci
```

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

### Install MathLive Package

Source: https://github.com/arnog/mathlive/blob/master/README.md

Install the MathLive library using npm. This command downloads the necessary packages to your project.

```bash
npm install mathlive
```

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

### Start Local Development Server

Source: https://github.com/arnog/mathlive/blob/master/CONTRIBUTING.md

Starts a local development server with live reload. Access the application at http://127.0.0.1:9029/dist/smoke/. A build is triggered on source file changes, except for .less files which require restarting the server.

```bash
# Start a local dev server with live reload
# After running this command, point your browser to http://127.0.0.1:9029/dist/smoke/
$ npm start
```

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

### MacroDictionary Example

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

A dictionary mapping macro names to their definitions. This example shows how to define a 'smallfrac' macro for fractions.

```javascript
mf.macros = { smallfrac: "^{#1}\\!\\!/\\!_{#2}" };
```

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

### Basic Keybinding Example

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Associates 'cmd+a' with the 'selectAll' command and 'ctrl+2' with inserting a square root in math mode.

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

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

### Cube Root

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Basic example of rendering a cube root.

```latex
g(x)=\\sqrt[3]{29}
```

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

### Inline Shortcut Hook Example

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Example of how to use the onInlineShortcut hook to detect and format multi-character symbols.

```javascript
 return `\mathrm{${symbol}}`; 
```

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

### Configure Inline Shortcuts

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Example of how to configure inline shortcuts in MathLive, demonstrating both string and object literal definitions.

```javascript
config.inlineShortcuts = {
     half: '\frac{1}{2}',
     in: {
         after: 'space+letter+digit+symbol+fence',
         value: '\in',
     },
 };
```

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

### Rule Scaling Example

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Demonstrates how \\rule can be used to create boxes of varying sizes relative to text.

```latex
\\text{M}\\color{green}m\\rule{1em}{1em}
```

```latex
{\\scriptstyle \\color{blue}m\\rule{1em}{1em}}
```

```latex
{\\Huge \\color{red}m\\rule{1em}{1em}}
```

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

### Install Playwright Browsers

Source: https://github.com/arnog/mathlive/blob/master/CONTRIBUTING.md

Installs the necessary Playwright browsers for running end-to-end tests. This command only needs to be run once per Playwright version.

```bash
# Install playwright browsers (once per playwright version)
npx playwright install
```

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

### Example of Math Styling Commands

Source: https://github.com/arnog/mathlive/blob/master/CHANGELOG_2017-2023.md

Demonstrates the application of various math styling commands like `\mathbf`, `\mathit`, and `\boldsymbol` to different mathematical expressions and symbols.

```latex
\mathbf{\sin \alpha} + \mathit{\cos \beta} + \mathbf{\tan x} + \boldsymbol{\sin \gamma}
```

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

### Styled Text Examples

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Demonstrates various text styling options in MathLive, including color, font styles, and variants.

```latex
\\class{foo}{\\textcolor{blue}{x}}\\class{foo}{\\colorbox{BurntOrange}{y}+1}
```

```latex
\\text{\\textcolor{green}{green}\\textcolor{blue}{blue}}
```

```latex
\\text{\\textit{italic} upright roman \\textbf{bold {\\fontshape{n}upright \\large large} roman}}
```

```latex
\\gothicCapitalC\\gothicCapitalH\\scriptCapitalE\\doubleStruckCapitalQ\\Bbbk
```

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

### Chemistry Notation

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Basic example of rendering chemical formulas using the \\ce command.

```latex
\\ce{ CrO4^2- }
```

```latex
\\ce{ CrO4^2-}
```

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

### Example of LaTeX Round-trip

Source: https://github.com/arnog/mathlive/blob/master/CHANGELOG_2017-2023.md

Provides examples of LaTeX expressions that were previously problematic for round-tripping (conversion to and from LaTeX) but are now handled correctly.

```latex
\mathfrak{C}
```

```latex
\boldsymbol{\sin\theta}
```

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

### Get MathField Configuration

Source: https://github.com/arnog/mathlive/blob/master/CHANGELOG_2017-2023.md

Demonstrates how to retrieve configuration settings from a MathField instance. Use `getConfig()` to get all settings, `getConfig('settingName')` for a specific setting, or `getConfig(['setting1', 'setting2'])` for multiple settings.

```javascript
mf.getConfig()
mf.getConfig('letterShapeStyle')
mf.getConfig(['smartMode', 'smartFence'])
```

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

### Keybinding Keycode Example

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Demonstrates using keycodes like '[Digit2]' to ensure a key combination is independent of the keyboard layout, useful for combinations like 'alt+2' on AZERTY keyboards.

```javascript
'alt+[Digit2]'
```

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

### Configure Mathfield Element

Source: https://github.com/arnog/mathlive/blob/master/test/smoke/index.html

Set up a MathfieldElement with custom policies, fraction navigation order, and inline shortcuts. This example also includes a mutation observer for styling tooltips.

```javascript
function setupMathfield(mf) {
  mf.mathVirtualKeyboardPolicy = 'manual';
  MathfieldElement.fractionNavigationOrder = 'denominator-numerator'
  // Add a mutation observer to ensure we can target the tooltip after it is created
  const observer = new MutationObserver((mutations, obs) => {
    const tooltipContents = mf.shadowRoot.querySelectorAll('.ML__tooltip-content');
    const mathContent = mf.shadowRoot.querySelector('.ML__container .ML__content')
    for (let tooltipContent of tooltipContents) {
      if (tooltipContent && mathContent) {
        // Disconnect the observer to prevent infinite loop
        obs.disconnect();
        mathContent.style.overflow = 'visible';
        //Style tooltip appearance
        tooltipContent.style.color = 'rgb(226,227,228)';
        tooltipContent.style.border = '4px solid #555'
        tooltipContent.style.maxWidth = '10000px'
        tooltipContent.style.padding = '15px 15px 15px 15px'
        tooltipContent.style.borderRadius = '18px'
        tooltipContent.style.backgroundColor = 'rgb(43,43,43)'
        tooltipContent.style.fontSize = '1.1rem'
        tooltipContent.style.lineHeight = '0.2rem'
        // Center the tooltip relative to the trigger and move it down
        tooltipContent.style.position = 'absolute';
        tooltipContent.style.left = '50%';
        tooltipContent.style.top = '0%'
        tooltipContent.style.transform = 'scale(1) translate(-50%,3em)';
        tooltipContent.style.zIndex = '1000';
        // Add the triangle if it doesn't already exist
        if (!tooltipContent.querySelector('.triangle')) {
          const triangle = document.createElement('div');
          triangle.className = 'triangle';
          triangle.style.position = 'absolute';
          triangle.style.top = '-15px'; // Adjust to position the triangle
          triangle.style.left = '50%';
          triangle.style.transform = 'translateX(-50%)';
          triangle.style.borderLeft = '10px solid transparent';
          triangle.style.borderRight = '10px solid transparent';
          triangle.style.borderBottom = '15px solid #555'; // Match the background color of the tooltip
          tooltipContent.appendChild(triangle);
        }
        // Reconnect the observer
        obs.observe(mf.shadowRoot, { childList: true, subtree: true });
      }
    }
  });
  // Start observing the shadow DOM for changes
  observer.observe(mf.shadowRoot, { childList: true, subtree: true });
}
mf.addEventListener('mount', () => {
  // MathfieldElement.fontsDirectory = "https://cdn.jsdelivr.net/npm/mathlive/dist/fonts";
  mf.macros = {
    ...mf.macros,
    atomic: {
      args: 1,
      def: '\\class{my-class}{#1}',
      captureSelection: true,
    },
  };
  setupMathfield(mf);
  mf.onInlineShortcut = (mf, shortcut) => {
    if (shortcut === 'tonh') return ('\\operatorname{tonh}(#@)');
    if (shortcut ===
```

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

### Displaystyle/Textstyle Spacing (Close)

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Another example illustrating spacing in displaystyle and textstyle.

```latex
)x)+)=)\\frac34)))();
```

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

### Keyboard Input: Parentheses

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Example of using keyboard input for parentheses and brackets in mathematical expressions.

```latex
a = (b+c) \\times \\lbrack d+e+f \\} + (a + (b - c \\star d) ) = 0
```

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

### Under Operator

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Example of using the \\underset command to place text below a mathematical symbol.

```latex
f(x) \\underset{x \\to 0}{=} x^2 + o(x^2)
```

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

### MathLive Placeholder Input Example

Source: https://github.com/arnog/mathlive/blob/master/test/prompts/index.html

This snippet demonstrates how to use MathLive's placeholder functionality. It shows how to define placeholders with labels and initial values, and how they are rendered in a textarea.

```html
x=\frac{\placeholder[numerator]{x}}{\placeholder[denominator]{y}}}} textarea x=\frac{\placeholder{33}}{\placeholder{}}+\frac{1}{}+\placeholder{} x=\frac{\placeholder[numer] [incorrect]{1+x}}{\placeholder[denom] [correct]{3}}+\placeholder[other]{\frac{x^2}{\sqrt{x}}} textarea disabled textarea readonly textarea
```

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

### Example Rendering and Conversion

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Demonstrates parsing LaTeX, converting to various formats (ASCII math, LaTeX roundtrip, expanded LaTeX, MathML), and rendering within a document. Includes error handling for parsing.

```javascript
if (true) {
  let error = [];
  document.getElementById('examples').innerHTML = Object.keys( TESTING_SAMPLES )
    .map((cat) => {
      return ( `<h2>${cat}</h2>` + TESTING_SAMPLES[cat]
        .map((x) => {
          const titleClass = x.class && x.class.includes('fail') ? 'fail' : '';
          let comment = '';
          if (typeof x.comment === 'string') {
            comment = x.comment;
          } else if (Array.isArray(x.comment)) {
            comment = '<ul><li>' + x.comment.join('</li><li>') + '</li></ul>';
          }
          let result = `<h3 class="${titleClass}">${x.title}</h3>` +
            `<p><code>${escapeHtml(x.latex)}</code></p>` +
            `<p class="formula"><script type="math/tex;mode=display">${x.latex}</` + 'script></p>'
            + `<p class="comment">${comment}</p>`;
          error = [];
          //
          // Parse and report any errors
          if (true) {
            mf.setValue(x.latex);
            if (error.length > 0) {
              result += '<p><code style="color: red">Parsing Errors:</code>';
              result += '<p><code style="color: red">' + error.join('<br>') + '</code>';
            }
            result += '<p><code style="color: #777">';
            {
              const val = mf.getValue('latex');
              if (val !== x.latex) result += '<p><b>latex roundtrip:</b><br>' + escapeHtml(val) + '</p>';
            }
            {
              const val = mf.getValue('latex-expanded');
              if (val !== x.latex) result += '<p><b>latex expanded:</b><br>' + escapeHtml(val);
            }
            result += '</code></p>';
            result += `<math display="block">${mf.getValue( 'math-ml' )}</math>`;
            /* result += '<p><code style="color: #0066ce">' + escapeHtml(mf.getValue('json-2')) + '</code></p>'; */
          }
          if (x.pic) {
            // const transform = /small/.test(x.class ?? '') ?
            // "translate(-33%,-33%) scale(.33)" :
            // "translate(-25%, -25%) scale(.50)"
            const transform = x.pic.endsWith('.png') ? 'transform:translate(-33%,-33%) scale(.33);' : '';
            result += `<p><img style="${transform}" src="${x.pic}"></p>`;
          }
          return result;
        })
        .join('') );
    })
    .join('');
  renderMathInElement('examples', { processClass: 'formula' });
}
```

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

### Generalized Fraction Examples

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Showcases different types of fractions, including simple fractions, nested fractions, tall fractions, binomial coefficients, and custom fractions using \\atopwithdelims.

```latex
-\\frac{2}{x+1}\\ne-\\frac{x+1}{2}
```

```latex
-\\frac{-\\frac{1}{2}}{-\\frac{3}{4}}
```

```latex
\\sqrt{ \\frac{x}{ \\frac{ { \\frac{\\frac{3}{4}} {5} } {2} } }}
```

```latex
\\binom{n}{k}= {n \\choose k} = {^n}C\_k = \\frac{n!}{k!(n-k)!}
```

```latex
x^{\\binom{n}{k}}
```

```latex
{n \\atopwithdelims ()0}
```

```latex
a \\over b \\over c
```

```latex
\\left[\\dfrac{2}{\\dfrac84}\\right]
```

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

### Example of Infix Operator Output

Source: https://github.com/arnog/mathlive/blob/master/CHANGELOG_2017-2023.md

Illustrates the correct LaTeX output for infix operators, specifically using `\atopwithdelims`.

```latex
\atopwithdelims
```

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

### Operator Examples

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Demonstrates the use of \\operatorname for custom operators, including multicharacter names, superscripts, and styling within the operator name.

```latex
f(x)=\\operatorname {li}(x)-\\sum 	extbackslash	extbackslash rho 	extbackslash	extbackslash operatorname {li}(x^{\\rho })-\\log(2)+\\int 	 dt	extbackslash	extbackslash t(t^{2}-1)	extbackslash	extbackslash log(t)
```

```latex
\\operatorname{li-mit max}^2(x)
```

```latex
\\operatorname{\\mathit{limit}}(x)
```

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

### Over and Under Brace

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Example of using \\overbrace and \\underbrace to add braces above and below expressions.

```latex
z = \\overbrace{ \\underbrace{x}\\_\\text{real} + i \\underbrace{y}\\_\\text{imaginary} }^\\text{complex number}
```

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

### Isotope Notation

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Example of rendering isotopes with mass number and atomic number using \\ce.

```latex
\\ce{^{227}\\_{90}Th+ }
```

```latex
\\ce{ {}^{227}\\_{90}Th+ }
```

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

### VirtualKeyboardInterface.layouts

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

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

```APIDOC
## VirtualKeyboardInterface.layouts

### Description
A layout is made up of one or more layers (think of the main layer and the shift layer on a hardware keyboard). A layout has a name and styling information. In addition, a layout can be represented as a standard name which includes `"numeric"`, `"functions"`, `"symbols"`, `"alphabetic"` and `"greek". See [mathfield/guides/virtual-keyboards](mathfield/guides/virtual-keyboards) | Guide: Virtual Keyboards

### Getter
`get layouts(): readonly (VirtualKeyboardLayout | VirtualKeyboardName)[];`

### Setter
`set layouts(value: VirtualKeyboardLayout | VirtualKeyboardName | readonly VirtualKeyboardLayout | VirtualKeyboardName[] | VirtualKeyboardLayout | VirtualKeyboardName[]): void`
```

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

### Over Operator

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Example of using the \\overset command to place text above a mathematical symbol.

```latex
f(x) \\overset{\\text{def}}{=} x \\ln(1+x)
```

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

### Array with Invalid Horizontal Line Placement

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

An example showing an error when \\hline is not placed at the start of a line.

```latex
\\begin{array}{c|c} 1 & 2 \\hline \\\\ 3 & 4 \\\\ \\end{array}
```

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

### Modify Register Example: String Dimension

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Example of setting a register with a dimension represented as a string.

```javascript
mf.registers.medmuskip = "3mu";
```

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

### Modify Register Example: Number

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Example of how to set a numeric value for a register like 'arraystretch'.

```javascript
mf.registers.arraystretch = 1.5;
```

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

### Build and Test MathLive

Source: https://github.com/arnog/mathlive/blob/master/CONTRIBUTING.md

Run these commands to build the project and execute the full test suite. Ensure 'npm run build' is executed before 'npm test'.

```bash
npm run build
npm test
```

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

### Setup Draggable Virtual Keyboard Container

Source: https://github.com/arnog/mathlive/blob/master/examples/draggable-virtual-keyboard/index.html

Initializes the virtual keyboard to be displayed within a custom, draggable container. It also adjusts the container's height based on the keyboard's geometry.

```javascript
function setupMathfields() {
  // Setup the virtual keyboard to be displayed in a custom container
  const kbdPanel = document.getElementById('keyboard-container');
  window.mathVirtualKeyboard.container = kbdPanel;

  // Adjust the height of the container to match the height of the
  // virtual keyboard
  window.mathVirtualKeyboard.addEventListener('geometrychange', (ev) => {
    kbdPanel.style.height = `${mathVirtualKeyboard.boundingRect.height}px`;
  });

  const kbdContainer = document.getElementById(
    'draggable-keyboard-container'
  );
  kbdContainer.addEventListener('mousedown', (ev) => {
    // Restore focus to currently focused DOM element
    const activeElement = document.activeElement;
    setTimeout(() => activeElement.focus(), 1);

    // Is the event in the resize handle?
    const rect = kbdContainer.getBoundingClientRect();
    const dx = rect.right - ev.clientX;
    const dy = rect.bottom - ev.clientY;
    if (dx < 20 && dy < 20) return;

    // Track the mouse position
    const controller = new AbortController();
    const signal = controller.signal;
    const offset = {
      left: ev.clientX - kbdContainer.offsetLeft,
      top: ev.clientY - kbdContainer.offsetTop,
    };

    window.addEventListener(
      'mousemove',
      (ev) => {
        kbdContainer.style.left = `${ev.clientX - offset.left}px`;
        kbdContainer.style.top = `${ev.clientY - offset.top}px`;
        ev.preventDefault();
      },
      { capture: true, signal }
    );

    window.addEventListener(
      'mouseup',
      (ev) => {
        ev.preventDefault();
        controller.abort();
      },
      { capture: true, signal }
    );
  });

  // Listen for focusin/focusout events on the document, and show/hide
  // the virtual keyboard accordingly.
  document.addEventListener('focusin', (ev) => positionDraggableKeyboard());
  document.addEventListener('focusout', (ev) => {
    if (ev.target.tagName === 'MATH-FIELD') {
      mathVirtualKeyboard.visible = false;
      kbdContainer.style.display = 'none';
    }
  });

  document.querySelectorAll('math-field').forEach(setupMathfield);
}
```

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

### Left/Right Delimiter Examples

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Illustrates the use of \\left and \\right delimiters for automatic sizing of parentheses, brackets, and braces, including evaluation at limits and nested delimiters.

```latex
\\left.\\frac{x^3}{3}\\right|\_0^1
```

```latex
\\left( \\sum\_{k=1}^n a\_k b\_k \\right)^{\\!\\!2} \\leq \\left( \\sum\_{k=1}^n a\_k^2 \\right) \\left( \\sum\_{k=1}^n b\_k^2 \\right)
```

```latex
\\left\\lbrace a \\middle\\mid \\frac12 \\right \\rbrace
```

```latex
\\left(x\\right)^2
```

```latex
\\left[\\left(\\frac{1}{x}\\right) + \\dfrac{2}{\\dfrac84}\\right]
```

```latex
a\\right) b \\left(c
```

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

### Scroll to Start

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Use `scrollToStart` to scroll the math field to its beginning. This command operates on the mathfield.

```typescript
scrollToStart: (mathfield) => boolean;
```

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

### Annotation Examples

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Demonstrates how to add annotations to mathematical expressions, including strikes, circles, rounded boxes, and canceling out terms in an equation.

```latex
3+\\enclose{updiagonalstrike downdiagonalstrike}\[6px solid rgba(205, 0, 11, .4)\]{18}+5
```

```latex
3+\\enclose{circle}\[6px solid rgba(205, 0, 11, .4)\]{18}+5
```

```latex
3+\\enclose{roundedbox}\[6px solid rgba(205, 0, 11, .4)\]{18}+5
```

```latex
\\begin{aligned} 2x-5 &= 7 \\\\ 2x\\enclose{updiagonalstrike}\[4px solid rgba(205, 0, 11, .4)\]{-5}\\textcolor{green}{\\enclose{updiagonalstrike}\[4px solid rgba(205, 0, 11, .4)\]{+5}} &= 7\\textcolor{green}{+5} \\\\ \\frac{\\enclose{updiagonalstrike}\[4px solid rgba(205, 0, 11, .4)\]{2}x}{\\textcolor{green}{\\enclose{updiagonalstrike}\[4px solid rgba(205, 0, 11, .4)\]{2}}} &= \\frac{12}{\\textcolor{green}{2}} \\\\ x &= 6 \\end{aligned}
```

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

### Modify Register Example: Dimension Object

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Example of setting a register with a dimension object, specifying value and unit.

```javascript
mf.registers.thinmuskip = { dimension: 2, unit: "mu" };
```

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

### Create Local Development Build

Source: https://github.com/arnog/mathlive/blob/master/CONTRIBUTING.md

Creates a local development build of the MathLive SDK in the `dist/` directory.

```bash
# Make a local development build in the `dist/` directory
$ npm run build
```

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

### Move Cursor to Mathfield Start

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Moves the cursor to the start of the mathfield. Returns true if the cursor position changed.

```typescript
moveToMathfieldStart: (model) => boolean;
```

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

### Initialize MathLive and Handle Input

Source: https://github.com/arnog/mathlive/blob/master/examples/rendering/index.html

Imports MathLive, gets references to the math field and output elements, and updates the output when the input changes. Also includes an event listener for font size adjustment.

```javascript
import '/dist/mathlive.mjs';
const mf = document.getElementById('mf');
const output = document.getElementById('output');
output.innerHTML = mf.getValue();
mf.addEventListener('input', (ev) => {
  output.innerHTML = ev.target.getValue();
});
const size = document.getElementById('size');
size.addEventListener('input', (ev) => {
  mf.style.fontSize = ev.target.value + "em";
});
```

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

### initVirtualKeyboardInCurrentBrowsingContext()

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Initializes the virtual keyboard to appear in the current browsing context.

```APIDOC
## initVirtualKeyboardInCurrentBrowsingContext()

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

### Returns
- `VirtualKeyboard` - The initialized virtual keyboard instance.
```

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

### Mathfield Methods: Get Options

Source: https://github.com/arnog/mathlive/blob/master/CHANGELOG_2017-2023.md

Retrieve all configuration options for the mathfield using getOptions(). This replaces the older getConfig() method.

```javascript
getOptions()
```

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

### Move Cursor to Group Start

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Moves the cursor to the start of the current group. Returns true if the cursor position changed.

```typescript
moveToGroupStart: (model) => boolean;
```

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

### Initialize MathLive in Parent Frame

Source: https://github.com/arnog/mathlive/blob/master/examples/iframe/README.md

Load MathLive as a module in the parent frame. The virtual keyboard will be displayed in this frame.

```html
<script type="module">
  import 'https://unpkg.com/mathlive?module';
</script>
```

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

### Setup Mathfield Virtual Keyboard Policy

Source: https://github.com/arnog/mathlive/blob/master/examples/draggable-virtual-keyboard/index.html

Configures the virtual keyboard policy for a math-field element to 'manual'. This allows for programmatic control over the keyboard's visibility.

```javascript
function setupMathfield(mf) {
  mf.mathVirtualKeyboardPolicy = 'manual';
}
```

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

### Define Custom Element and Initialize Mathfields

Source: https://github.com/arnog/mathlive/blob/master/examples/draggable-virtual-keyboard/index.html

Waits for the 'math-field' custom element to be defined, then adds a 'ready' class to the body and initializes the mathfields, including the setup for the draggable virtual keyboard.

```javascript
customElements.whenDefined('math-field').then(() => {
  document.body.classList.add('ready');
  setupMathfields();
});
```

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

### Extend Selection to Mathfield Start

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Extends the current selection to the start of the mathfield. Returns true if the selection state changed.

```typescript
extendToMathFieldStart: (model) => boolean;
```

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

### Create Production Build

Source: https://github.com/arnog/mathlive/blob/master/CONTRIBUTING.md

Generates an optimized production build of the MathLive SDK, outputting to the `dist/` directory.

```bash
# Create a production build to `dist/`
$ npm run build production
```

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

### Multi-line LaTeX Equations

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Examples of rendering multi-line mathematical equations using LaTeX. Supports alignment and complex mathematical formulas.

```latex
\\left\\langle{x^{\\prime},\\,t^{\\prime}}\\left|x_0,\\,t_0\\right.\\right\\rangle= \\lim_{N\\to\\infty}\\left\\lbrace\\left(\\frac{m}{2\\pi\\hbar\\mathrm{i}\\Delta t}\\right)^{N\\/2}\\right.\\ \\cdot\\int\\ldots\\int\\exp\\left\\lbrack\\frac{\\mathrm{i}\\Delta t}{\\hbar}\\sum_{i=1}^{N}\\frac{m}{2}\\left(\\frac{x_{i}-x_{i-1}}{\\Delta t}\\right)^2\\right\\rbrack\\ \\cdot\\left.\\left(\\mathrm{d}x_1\\mathrm{d}x_2\\ldots\\mathrm{d}x_{N-1}\\right)\\right\\rbrace
```

```latex
\\begin{align}\\left\\langle{x^{\\prime},\\,t^{\\prime}}\\left|x_0,\\,t_0\\right.\\right\\rangle= & \\lim_{N\\to\\infty}\\left\\lbrace\\left(\\frac{m}{2\\pi\\hbar\\mathrm{i}\\Delta t}\\right)^{N\\/2}\\right.\\\\ & \\cdot\\int\\ldots\\int\\exp\\left\\lbrack\\frac{\\mathrm{i}\\Delta t}{\\hbar}\\sum_{i=1}^{N}\\frac{m}{2}\\left(\\frac{x_{i}-x_{i-1}}{\\Delta t}\\right)^2\\right\\rbrack\\\\ & \\cdot\\left.\\left(\\mathrm{d}x_1\\mathrm{d}x_2\\ldots\\mathrm{d}x_{N-1}\\right)\\right\\rbrace\\end{align}
```

```latex
\\frac{1}{6} \\left(\\sigma(k,h,0) +\\frac{3(h-1)}{h}\\right) +\\frac{1}{6} \\left(\\sigma(h,k,0) +\\frac{3(k-1)}{k}\\right) =\\frac{1}{6} \\left(\\frac{h}{k} +\\frac{k}{h} +\\frac{1}{hk}\\right) +\\frac{1}{2} -\\frac{1}{2h} -\\frac{1}{2k}
```

```latex
v^{\\ [2\]} =(0,5,5,0,9,5,1,0), v^{\\ [3\]} =(0,9,11,9,10,12,0,1)
```

```latex
T(n) \\hiderel{\\leq} T(2^{\\lceil\\lg n\\rceil}) \\leq c(3^{\\lceil\\lg n\\rceil} -2^{\\lceil\\lg n\\rceil}) <3c\\cdot3^{\\lg n} =3c\,n^{\\lg3}
```

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

### Configure Virtual Keyboard Layouts

Source: https://github.com/arnog/mathlive/blob/master/test/smoke/index.html

Customize the virtual keyboard layout by defining custom layers and styles. This example shows a 'minimalist' layout with specific styling for digits.

```javascript
// window.mathVirtualKeyboard.layouts = 'minimalist';
// mathVirtualKeyboard.layouts = [
// {
// label: 'minimal',
// tooltip: 'Only the essential',
// layers: [
// {
// style: `
// .digit { background: blue !important; color: white !important }
// .variant_indicator::before { content: '•'; color: #38d; }
// `,
// rows: [
// [
// // {
// // latex: 'x',
// // insert: 'x',
// // shift: { latex: 'a', insert: 's' },
// // },
// // {
// // label: 'Aa',
// // class: 'if-math-mode',
// // command: ['perform-with-feedback', ['switch-mode', 'text']],
// // },
// // {
// // label: '√x',
// // class: 'if-text-mode',
// // command: ['perform-with-feedback', ['switch-mode', 'math']],
// // },
// // '-',
// // '\\times',
// // '\\frac{#@}{#?}',
// // '=',
// // '.',
// // '(',
// // ')',
// // '\\sqrt{#0}',
// // '#@^{#?}',
// // ],
// // [
// // { class: 'variant_indicator', latex: '1' },
// // { class: 'digit', latex: '2' },
// // { class: 'digit', latex: '3' },
// // { class: 'digit', latex: '4' },
// // { class: 'digit', latex: '5' },
// // { class: 'digit', latex: '6' },
// // { class: 'digit', latex: '7' },
// // { class: 'digit', latex: '8' },
// // { class: 'digit', latex: '9' },
// // { class: 'digit', latex: '0' },
// // ],
// // ],
// // },
// // ],
// // },
// // 'alphabetic',
// // ];
```

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

### Import MathLive Module

Source: https://github.com/arnog/mathlive/blob/master/examples/draggable-virtual-keyboard/index.html

Import the MathLive module to enable its functionality. Use the CDN version if preferred.

```javascript
import '/dist/mathlive.mjs'; // To use the CDN version instead: // import 'https://unpkg.com/mathlive?module';
```

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

### Delete to Group Start

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Use `deleteToGroupStart` to delete content from the cursor position to the start of the current group. This command operates on the model.

```typescript
deleteToGroupStart: (model) => boolean;
```

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

### Extend Selection to Group Start

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Extends the current selection to the start of the current group. Returns true if the selection state changed.

```typescript
extendToGroupStart: (model) => boolean;
```

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

### Delete to Math Field Start

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Use `deleteToMathFieldStart` to delete content from the cursor position to the start of the math field. This command operates on the model.

```typescript
deleteToMathFieldStart: (model) => boolean;
```

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

### Replace prompt content with setPromptValue

Source: https://github.com/arnog/mathlive/blob/master/CHANGELOG_2017-2023.md

The `mf.setPromptContent()` method has been renamed to `mf.setPromptValue()`. This example shows how to achieve the functionality of the removed `mf.stripPromptContent()` method by retrieving prompts, mapping their values, and then setting empty values.

```javascript
const prompts = mf.getPrompts();
const values = prompts.map(id => mf.getPromptValue(id));
prompts.forEach(id => mf.setPromptValue(id, ""));
```

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

### selectionAtStart

Source: https://github.com/arnog/mathlive/blob/master/examples/vue/README.md

Checks if the current selection begins at the very start of its containing selection group. Returns true if the selection starts at the beginning, false otherwise.

```APIDOC
## selectionAtStart()

### Description
Return true if the selection starts at the beginning of the selection group.

### Method
`selectionAtStart():boolean`
```

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

### Styling Delimiters, Roots, and Fractions

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Demonstrates applying color and styling to fractions, square roots, and placeholders.

```latex
\\color{blue}\\frac{1}{x+1}\\sqrt[3]{\\left(\\frac{1}{2}\\right)}=\\placeholder{}
```

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

### Initialize MathLive and Event Listeners

Source: https://github.com/arnog/mathlive/blob/master/examples/iframe/frame-1.html

Imports the MathLive module and sets up event listeners for geometry changes and virtual keyboard toggles. It also handles input events from a MathLive element to update an output display.

```javascript
import "/dist/mathlive.mjs"; // import 'https://unpkg.com/mathlive?module';
const mf1 = document.getElementById("mf1");
window.mathVirtualKeyboard.targetOrigin = "*";
window.mathVirtualKeyboard.addEventListener("geometry-change", () => {
  console.log("Geometry changed");
});
window.mathVirtualKeyboard.addEventListener(
  "before-virtual-keyboard-toggle",
  () => {
    console.log("Virtual keyboard toggled");
  }
);
ými.addEventListener("input", (ev) => {
  document.getElementById("output").innerHTML = ev.target.value;
});
mf1.virtualKeyboardTargetOrigin = "*"; // any domain
```

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

### VirtualKeyboardInterface.boundingRect

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Gets the bounding rectangle of the virtual keyboard.

```APIDOC
## VirtualKeyboardInterface.boundingRect

### Description
Gets the bounding rectangle of the virtual keyboard.

### Property
`boundingRect: DOMRect;`
```

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

### MathfieldElement.mode

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Gets or sets the parsing mode of the mathfield.

```APIDOC
## MathfieldElement.mode

### Description
Determines how the content of the mathfield is parsed. This can be set to different `ParseMode` values.

### Method
Getter and Setter

### Endpoint
N/A (JavaScript property)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Set the mode to LaTeX
mathfield.mode = 'latex';

// Get the current mode
console.log(mathfield.mode);
```

### Response
#### Success Response (N/A)
Returns the current `ParseMode`.

#### Response Example
N/A
```

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

### Render Math in Document Example

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Renders all LaTeX code within the document body into typeset math. This function is computationally expensive and should ideally be called only once after the DOM is loaded.

```typescript
import { renderMathInDocument } from 'https://esm.run/mathlive';
// Alternatively, you can use the **unpkg** CDN to load the library
// import { renderMathInDocument } from 'https://unpkg.com/mathlive?module';

renderMathInDocument();
```

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

### MathfieldElement.plonkSound

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Gets or sets the sound played when a command has no effect.

```APIDOC
## MathfieldElement.plonkSound

### Description
Configures the sound feedback for actions that have no effect, such as pressing spacebar at the root level. Can be a sound file name or `null` to disable.

### Method
Getter and Setter

### Endpoint
N/A (JavaScript property)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Set a custom sound file
MathfieldElement.plonkSound = 'custom-plonk.wav';

// Turn off the sound
MathfieldElement.plonkSound = null;
```

### Response
#### Success Response (N/A)
Returns the name of the sound file or `null`.

#### Response Example
N/A
```

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

### MathfieldElement Instantiation and Options

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Demonstrates how to create a MathfieldElement, attach it to the DOM, and modify its options after mounting.

```APIDOC
## MathfieldElement Instantiation and Options

### Description
This snippet shows how to instantiate a `MathfieldElement` programmatically, append it to the document body, and set properties like `smartFence` after the element has been mounted.

### Method
```javascript
// 1. Create a new MathfieldElement
const mf = new MathfieldElement();

// 2. Attach it to the DOM
document.body.appendChild(mf);

// 3. Modifying options after the mathfield has been attached to the DOM
mf.addEventListener("mount"), () => {
 mf.smartFence = true;
});
```
```

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

### MathfieldElement.isFunction

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Gets or sets a function to determine if a command is a function.

```APIDOC
## MathfieldElement.isFunction

### Description
Allows customization of how the system determines if a given command is considered a function.

### Method
Getter and Setter

### Endpoint
N/A (JavaScript property)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
MathfieldElement.isFunction = (command) => {
  // Custom logic to identify functions
  return command === 'sin' || command === 'cos';
};
```

### Response
#### Success Response (N/A)
Returns the function used to check if a command is a function.

#### Response Example
N/A
```

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

### Set Keyboard Layouts

Source: https://github.com/arnog/mathlive/blob/master/test/virtual-keyboard/index.html

Demonstrates how to set the virtual keyboard to a 'minimalist' layout and how to define a custom layout using an array of key definitions.

```javascript
kbd.layouts = 'minimalist'; // kbd.alphabeticLayout = 'dvorak'; // k.addEventListener('virtual-keyboard-toggle', (ev) => // console.log('toggling ', ev) // );
```

```javascript
mathVirtualKeyboard.layouts = ['numeric', 'symbols', makeVirtualKeyboard([]), 'greek']; // 'minimalist';
```

```javascript
mathVirtualKeyboard.layouts = "default";
```

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

### MathfieldElement.value

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

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

```APIDOC
## MathfieldElement.value

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

### Method
GET/SET

### Endpoint
MathfieldElement.value

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

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

### Initialize MathLive and Handle Input Events

Source: https://github.com/arnog/mathlive/blob/master/examples/latex/index.html

This snippet demonstrates how to initialize the MathLive editor and set up event listeners to synchronize values between the MathLive input and a standard LaTeX input field. It also includes the import for the LaTeX conversion utility.

```javascript
import { convertLatexToMarkup } from '/dist/mathlive.mjs'; // import 'https://unpkg.com/mathlive?module'; import * as htmlToImage from './html-to-image/index.mjs'; const mf = document.getElementById('mf'); mf.addEventListener('input', (evt) => { document.getElementById('latex').value = mf.getValue(); }); document.getElementById('latex').addEventListener('input', (ev) => { mf.setValue(ev.target.value); });
```

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

### Import MathLive and Configure Virtual Keyboard Container

Source: https://github.com/arnog/mathlive/blob/master/examples/popup-virtual-keyboard/index.html

Import the MathLive library and set the virtual keyboard container element. This code is essential for enabling the virtual keyboard functionality.

```javascript
import '/dist/mathlive.mjs'; // To use the CDN version instead: // import 'https://unpkg.com/mathlive?module';
window.mathVirtualKeyboard.container = document.getElementById('keyboard-container');
```

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

### Import and Use MathLive Vue Wrapper

Source: https://github.com/arnog/mathlive/blob/master/examples/vue/README.md

Import the MathLive library and the Vue wrapper, then register the wrapper with Vue. Ensure your Vue configuration includes `runtimeCompiler: true` if you encounter runtime errors.

```html
<script type="module">
  import * as MathLive from 'https://unpkg.com/mathlive?module';
  import VueMathfield from 'https://unpkg.com/mathlive/dist/vue-mathlive.mjs';

  Vue.use(VueMathfield, MathLive);
</script>
```

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

### Cases Environment with displaystyle

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Illustrates the difference in rendering between `cases` and `dcases` environments, particularly when using `\displaystyle` or `\textstyle` for mathematical content within the cases.

```latex
= \\begin{cases} \\sum_n^{100} \\\\ \\displaystyle \\sum_n^{100} \\end{cases}
```

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

### Render Bbox with Multiple Arguments

Source: https://github.com/arnog/mathlive/blob/master/test/static/index.html

Shows how to use \\bbox with multiple arguments to control padding, background color, and border style.

```latex
\\frac1c + \\bbox[2em,yellow,border:solid 5px red]{\\sqrt[3]{x}} = \\binom{C}{k}
```

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

### MathfieldElement.disabled

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Gets or sets a boolean value indicating whether the mathfield is disabled.

```APIDOC
## MathfieldElement.disabled

### Description
Controls the disabled state of the mathfield. When disabled, user interaction is prevented.

### Method
Getter and Setter

### Endpoint
N/A (JavaScript property)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Disable the mathfield
mathfield.disabled = true;

// Check if disabled
console.log(mathfield.disabled);
```

### Response
#### Success Response (N/A)
Returns a boolean indicating if the mathfield is disabled.

#### Response Example
N/A
```

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

### VirtualKeyboardInterface.show()

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Shows the virtual keyboard, optionally with animation.

```APIDOC
## VirtualKeyboardInterface.show()

### Description
Shows the virtual keyboard, optionally with animation.

### Method
`show(options?): void`

### Parameters
#### options?
`object`

##### animate
`boolean` - Whether to animate the showing of the keyboard.
```

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

### VariantStyle Type

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Explains the stylistic variations applicable to certain variants, with a table of examples.

```APIDOC
## VariantStyle

### Description
Represents stylistic variations that can be applied to certain variants, typically affecting letters and digits.

### Values

- "up"
- "bold"
- "italic"
- "bolditalic"
- ""

### Notes
- These variations support a limited set of characters.

### Examples

| variant         | `up`            | `bold`          | `italic`        | `bolditalic`    |
|-----------------|-----------------|-----------------|-----------------|-----------------|
| `normal`        | ABCabc012       | 𝐀𝐁𝐂𝐚𝐛𝐜𝟎𝟏𝟐    | 𝐴𝐵𝐶𝑎𝑏𝑐        | 𝑨𝑩𝑪𝒂𝒃𝒄        |
| `double-struck` | 𝔸𝔹ℂ𝕒𝕓𝕔𝟘𝟙𝟚  | n/a             | n/a             | n/a             |
| `calligraphic`  | 𝒜ℬ𝒞𝒶𝒷𝒸     | 𝓐𝓑𝓒𝓪𝓫𝓬        | n/a             | n/a             |
| `fraktur`       | 𝔄𝔅ℭ𝔞𝔟𝔠       | 𝕬𝕭𝕮𝖆𝖇𝖈         | n/a             | n/a             |
| `sans-serif`    | 𝖠𝖡𝖢𝖺𝖻𝖼𝟢𝟣𝟤 | 𝗔𝗕𝗖𝗮𝗯𝗰𝟬𝟭𝟮   | 𝘈𝘉𝘊𝘢𝘣𝘤      | 𝘼𝘽𝘾𝙖𝙗𝙘       |
| `monospace`     | 𝙰𝙱𝙲𝚊𝚋𝚌        | n/a             | n/a             | n/a             |
```

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

### Import and Event Listener for MathLive

Source: https://github.com/arnog/mathlive/blob/master/examples/iframe/frame-2.html

Import the MathLive module and set up an event listener to capture user input from the MathLive instance. The captured value is then displayed in a separate HTML element.

```javascript
import '/dist/mathlive.mjs'; // import 'https://unpkg.com/mathlive?module';
document.getElementById('mf2').addEventListener('input', (ev) => {
  document.getElementById('output').innerHTML = ev.target.value;
});
```

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

### Customize Virtual Keyboard Layers (Before)

Source: https://github.com/arnog/mathlive/blob/master/CHANGELOG_2017-2023.md

This code demonstrates the previous method of defining custom virtual keyboard layers and layouts using `setOptions`.

```javascript
const MINIMAL_LAYER = [
  minimal: {
    rows: [
      [
        {latex: "+"}, {latex: "-"}, {latex: "\\times"},
        {latex: "\\frac{#@}{#?}"}, {latex: "="}, {latex: "."},
        {latex: "("}, {latex: ")"}, {latex: "\\sqrt{#0}"},
        {latex: "#@^{#?}"}
      ],
      [
        {latex: "1"}, {latex: "2"}, {latex: "3"}, {latex: "4"},
        {latex: "5"}, {latex: "6"}, {latex: "7"}, {latex: "8"},
        {latex: "9"}, {latex: "0"},
      ]
    ]
}];

const MINIMAL_KEYBOARD = {
  'minimal': {
    label: 'Minimal',
    layer: 'minimal',
  },
};

mf.setOptions({
  customVirtualKeyboardLayers: MINIMAL_LAYER,
  customVirtualKeyboards: MINIMAL_KEYBOARD,
  virtualKeyboards: 'minimal',
});
```

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

### MathfieldElement.readonly

Source: https://github.com/arnog/mathlive/blob/master/src/api.md

Gets or sets a boolean value indicating whether the mathfield is in read-only mode.

```APIDOC
## MathfieldElement.readonly

### Description
Controls whether the mathfield is in a read-only state, preventing edits.

### Method
Getter and Setter

### Endpoint
N/A (JavaScript property)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// Set to read-only
mathfield.readonly = true;

// Check read-only status
console.log(mathfield.readonly);
```

### Response
#### Success Response (N/A)
Returns a boolean indicating if the mathfield is read-only.

#### Response Example
N/A
```