# mathlive

### Modules

Use MathLive to render and edit mathematical formulas in your browser.

<script type="module">
// To invoke the functions in this module, import the Mathlive module.

import MathLive from 'https://unpkg.com/mathlive/dist/mathlive.mjs';

console.log(MathLive.latexToAST('e^{i\\pi}+1=0'));
</script>

### Converting

Converts a MathJSON Abstract Syntax Tree to a LaTeX string.

astToLatex(mathJson: any, options?: {beginRepeatingDigits?: string; decimalMarker?: string; endRepeatingDigits?: string; exponentMarker?: string; exponentProduct?: string; groupSeparator?: string; precision?: number; product?: string}): string
mathJson: any
options:
beginRepeatingDigits?: string;

The format used for numbers using the scientific notation. Default = "auto" * / scientificNotation?: ‘auto’ | ‘engineering’ | ‘on’; /** The string used at the begining of repeating digits. Default = "\\overline{"

decimalMarker?: string;

The character used as the decimal marker. Default = ".".

endRepeatingDigits?: string;

The string used at the end of repeating digits. Default = "}"

exponentMarker?: string;

The character used to indicate an exponent. Default = ""

exponentProduct?: string;

The character used before an exponent indicator. Default = "\\cdot "

groupSeparator?: string;

The character used to separate group of numbers, typically thousands. Default = "\\, "

precision?: number;

The number of digits used in the representation of numbers. Default = 14

product?: string;

The character used to indicate product. Other option would be "\\times ". Default = "\\cdot "

string

The LaTeX representation of the Abstract Syntax Tree, if valid.

Converts a LaTeX string to an MathJSON Abstract Syntax Tree

latexToAST(latex: string, options?: {macros?: MacroDictionary; onError?: ParserErrorListener}): any
latex: string

A string of valid LaTeX. It does not have to start with a mode token such as a $ or $$. options: macros?: MacroDictionary; A dictionary of LaTeX macros onError?: ParserErrorListener; Callback invoked when an error is encountered while parsing the input string. any The Abstract Syntax Tree as an object literal using the MathJSON format. ### module "mathlive"latexToMarkup()Permalink Converts a LaTeX string to a string of HTML markup. latexToMarkup(text: string, options: {letterShapeStyle?: "tex" | "french" | "iso" | "upright" | "auto"; macros?: MacroDictionary; mathstyle?: "displaystyle" | "textstyle"; onError?: ParserErrorListener}): string text: string A string of valid LaTeX. It does not have to start with a mode token such as  or \(. options: letterShapeStyle?: "tex" | "french" | "iso" | "upright" | "auto"; macros?: MacroDictionary; A dictionary of LaTeX macros mathstyle?: "displaystyle" | "textstyle"; If 'displaystyle' the “display” mode of TeX is used to typeset the formula, which is most appropriate for formulas that are displayed in a standalone block. If 'textstyle' is used, the “text” mode of TeX is used, which is most appropriate when displaying math “inline” with other text (on the same line). onError?: ParserErrorListener; A function invoked when a syntax error is encountered. An attempt to recover will be made even when an error is reported. string ### module "mathlive"latexToSpeakableText()Permalink Converts a LaTeX string to a textual representation ready to be spoken console.log(MathLive.latexToSpeakableText('\\frac{1}{2}')); // 'half' latexToSpeakableText(latex: string, options: TextToSpeechOptions & {macros?: MacroDictionary; onError?: ParserErrorListener}): string latex: string A string of valid LaTeX. It does not have to start with a mode token such as a  or \(. options: readAloudHook?: (element: HTMLElement, text: string, config: MathfieldConfig): void; speakHook?: (text: string, config: MathfieldConfig): void; speechEngine?: "local" | "amazon"; Indicates which speech engine to use for speech output. Use local to use the OS-specific TTS engine. Use amazon for Amazon Text-to-Speech cloud API. You must include the AWS API library and configure it with your API key before use. speechEngineRate?: string; Sets the speed of the selected voice. One of x-slow, slow, medium, fast, x-fast or a value as a percentage. Range is 20% to 200% For example 200% to indicate a speaking rate twice the default rate. speechEngineVoice?: string; Indicates the voice to use with the speech engine. This is dependent on the speech engine. For Amazon Polly, see here: https://docs.aws.amazon.com/polly/latest/dg/voicelist.html textToSpeechMarkup?: "" | "ssml" | "ssml_step" | "mac"; The markup syntax to use for the output of conversion to spoken text. Possible values are ssml for the SSML markup or mac for the macOS markup, i.e. &#91;&#91;ltr&#93;&#93;. textToSpeechRules?: "mathlive" | "sre"; Specify which set of text to speech rules to use. A value of mathlive indicates that the simple rules built into MathLive should be used. A value of sre indicates that the Speech Rule Engine from Volker Sorge should be used. #### Caution SRE is not included or loaded by MathLive. For this option to work SRE should be loaded separately. textToSpeechRulesOptions?: {[key: string]: string}; A set of key/value pairs that can be used to configure the speech rule engine. Which options are available depends on the speech rule engine in use. There are no options available with MathLive’s built-in engine. The options for the SRE engine are documented here string The spoken representation of the input LaTeX. ### Rendering ### module "mathlive"getOriginalContent()Permalink After calling renderMathInElement or makeMathField the original content can be retrieved by calling this function. Given the following markup: <span id='equation'>f(x)=sin(x)</span>  The following code: MathLive.renderMathInElement('equation'); console.log(MathLive.getOriginalContent('equation'));  will output: f(x)=sin(x)  getOriginalContent(element: string | HTMLElement, options?: {namespace?: string}): string element: A DOM element ID, a DOM element or a Mathfield. options: namespace?: string; The namespace used for the data- attributes. If you used a namespace with renderMathInElement(), you must use the same namespace here. string ### module "mathlive"renderMathInDocument()Permalink Transform all the elements in the document body that contain LaTeX code into typeset math. Note: This is a very expensive call, as it needs to parse the entire DOM tree to determine which elements need to be processed. In most cases this should only be called once per document, once the DOM has been loaded. To render a specific element, use renderMathInElement() Read Getting Started. import MathLive from 'https://unpkg.com/mathlive/dist/mathlive.mjs'; document.addEventListener("load", () => { MathLive.renderMathInDocument(); }); renderMathInDocument(options?: AutoRenderOptions): void options: AutoRenderOptions ### module "mathlive"renderMathInElement()Permalink Transform all the children of element, recursively, that contain LaTeX code into typeset math. Read Getting Started. renderMathInElement(element: HTMLElement, options?: AutoRenderOptions): void element: HTMLElement An HTML DOM element, or a string containing the ID of an element. options: AutoRenderOptions ### module "mathlive"revertToOriginalContent()Permalink revertToOriginalContent(element: HTMLElement, options?: {namespace?: string}): void element: HTMLElement options: namespace?: string; ### Other ### module "mathlive"latexToMathML()Permalink Converts a LaTeX string to a string of MathML markup. latexToMathML(latex: string, options: {generateID: boolean; macros?: MacroDictionary; onError?: ParserErrorListener}): string latex: string A string of valid LaTeX. It does not have to start with a mode token such as a  or \(. options: generateID: boolean; macros?: MacroDictionary; onError?: ParserErrorListener; Callback invoked when an error is encountered while parsing the input string. string ### module "mathlive"makeMathField()Permalink Convert a DOM element into an editable mathfield. After the DOM element has been created, the value element.mathfield will return a reference to the mathfield object. This value is also returned by makeMathField makeMathField(element: HTMLElement| string, config: MathfieldConfig): Mathfield element: A DOM element, for example as obtained by document.getElementById(), or the ID of a DOM element as a string. Given the HTML markup: <span id='equation'>f(x)=sin(x)</span>  The following code will turn the span into an editable mathfield. import MathLive from 'https://unpkg.com/mathlive/dist/mathlive.mjs'; MathLive.makeMathField('equation');  config: MathfieldConfig Mathfield ### module "mathlive"AutoRenderOptionsPermalink TeX?: {processEnvironments?: boolean}; delimiters?: {display: string[][]; inline: string[][]}; Delimiter pairs that will trigger a render of the content in display style or inline, respectively. Default: {display: [ ['', ''], ['\$', '\$'] ] ], inline: [ ['\\(','\$$'] ] ]} ignoreClass?: string; A string used as a regular expression of class names of elements whose content will not be scanned for delimiter Default: 'tex2jax_ignore' macros?: MacroDictionary; Custom LaTeX macros namespace?: string; Namespace that is added to data- attributes to avoid collisions with other libraries. It is empty by default. The namespace should be a string of lowercase letters. preserveOriginalContent?: boolean; If true, store the original textual content of the element in a data-original-content attribute. This value can be accessed for example to restore the element to its original value:  elem.innerHTML = elem.dataset.originalContent;  Default: 'mathml' processClass?: string; A string used as a regular expression of class names of elements whose content will be scanned for delimiters, even if their tag name or parent class name would have prevented them from doing so. Default: 'tex2jax_process' processScriptType?: string; <script> tags of the indicated type will be processed while others will be ignored. Default: 'math/tex' readAloud?: boolean; If true, generate markup that can be read aloud later using speak Default: false renderAccessibleContent?: string; The format(s) in which to render the math for screen readers: • 'mathml' MathML • 'speakable-text' Spoken representation You can pass an empty string to turn off the rendering of accessible content. You can pass multiple values separated by spaces, e.g 'mathml speakable-text' Default: 'mathml' renderToMarkup?: Function; A function that will convert any LaTeX found to HTML markup. This is only useful to override the default MathLive renderer renderToMathML?: Function; a function that will convert any LaTeX found to MathML markup. renderToSpeakableText?: Function; A function that will convert any LaTeX found to speakable text markup. skipTags?: string[]; An array of tag names whose content will not be scanned for delimiters (unless their class matches the processClass pattern below. Default: ['noscript', 'style', 'textarea', 'pre', 'code', 'annotation', 'annotation-xml'] ## module "mathfield"Permalink ### module "mathfield"interface MathfieldPermalink$applyStyle(style: Style): void

Updates the style (color, bold, italic, etc…) of the selection or sets the style to be applied to future input.

If there is a selection, the style is applied to the selection

If the selection already has this style, remove it. If the selection has the style partially applied (i.e. only some sections), remove it from those sections, and apply it to the entire selection.

If there is no selection, the style will apply to the next character typed.

$blur(): void$clearSelection(): void
$el(): HTMLElement Return the DOM element associated with this mathfield. Note that this.$el().mathfield === this

$focus(): void$hasFocus(): boolean
$insert(s: string, options?: InsertOptions): boolean Inserts a block of text at the current insertion point. This method can be called explicitly or invoked as a selector with $perform("insert").

After the insertion, the selection will be set according to the options.selectionMode.

$keystroke(keys: string, evt?: KeyboardEvent): boolean$latex(text?: string, options?: InsertOptions): string

Sets or gets the content of the mathfield.

If text is not empty, sets the content of the mathfield to the text interpreted as a LaTeX expression.

If text is empty (or omitted), return the content of the mathfield as a LaTeX expression.

$perform(command: Selector | any[]): boolean Performs a command defined by a selector.$revertToOriginalContent(): void

Reverts this mathfield to its original content.

After this method has been called, no other methods can be called on the object.

To turn the element back into a mathfield, call MathLive.makeMathField() on the element again to get a new mathfield object.

$select(): void$selectedText(format?: OutputFormat): string

Returns a textual representation of the selection in the mathfield.

$selectionAtEnd(): boolean Checks if the selection extends to the end of the selection group.$selectionAtStart(): boolean

Checks if the selection starts at the beginning of the selection group.

$selectionDepth(): number Returns the depth of the selection group. If the selection is at the root level, returns 0. If the selection is a portion of the numerator of a fraction which is at the root level, return 1. Note that in that case, the numerator would be the “selection group”.$selectionIsCollapsed(): boolean

Checks if the selection is collapsed.

$setConfig(config: MathfieldConfig): void$text(format?: OutputFormat): string

Returns a textual representation of the mathfield.

$typedText(text: string): void Simulates a user typing the keys indicated by text. getConfig(keys: keyof MathfieldConfig): any getConfig(keys: string[]): MathfieldConfig getConfig(keys: keyof MathfieldConfig | string[]): any | MathfieldConfig ### module "mathfield"Types ### module "mathfield"InsertOptionsPermalink feedback?: boolean; If true, provide audio and haptic feedback focus?: boolean; If true, the mathfield will be focused after the insertion format?: string; The format of the input string: "auto"The string is Latex fragment or command) (default) "latex"The string is a Latex fragment insertionMode?: "replaceSelection" | "replaceAll" | "insertBefore" | "insertAfter"; macros?: MacroDictionary; mode?: ParseMode | "auto"; If "auto" or omitted, the current mode is used placeholder?: string; resetStyle?: boolean; If true, the style after the insertion is the same as the style before. If false, the style after the insertion is the style of the last inserted atom. selectionMode?: "placeholder" | "after" | "before"; Describes where the selection will be after the insertion: "placeholder"The selection will be the first available placeholder in the text that has been inserted (default) "after"The selection will be an insertion point after the inserted text "before"The selection will be an insertion point before the inserted text "item"The inserted text will be selected smartFence?: boolean; If true, promote plain fences, e.g. (, as \left...\right or \mleft...\mright style?: Style; suppressChangeNotifications?: boolean; ### module "mathfield"OutputFormatPermalink FormatDescription "latex"LaTeX rendering of the content, with LaTeX macros not expanded "latex-expanded"All macros are recursively expanded to their definition "json"A MathJSON abstract syntax tree, as an object literal formated as a JSON string "spoken"Spoken text rendering, using the default format defined in config, which could be either text or SSML markup. "spoken-text"A plain spoken text rendering of the content. "spoken-ssml"A SSML (Speech Synthesis Markup Language) version of the content, which can be used with some text-to-speech engines such as AWS "spoken-ssml-withHighlighting"Like "spoken-ssml" but with additional annotations necessary for synchronized higlighting (read aloud) "mathML"A string of MathML markup "latex" | "latex-expanded" | "json" | "json-2" | "spoken" | "spoken-text" | "spoken-ssml" | "spoken-ssml-withHighlighting" | "mathML" | "ASCIIMath" ## module "config"Permalink ### module "config"interface MathfieldHooksPermalink These methods provide an opportunity to intercept or modify an action. Their return value indicate whether the default handling should proceed. onKeystroke?: (sender: Mathfield, keystroke: string, ev: KeyboardEvent): boolean A hook invoked when a keystroke is about to be processed. • keystroke: a string describing the keystroke • ev: the native keyboard event Return false to stop the handling of the event. onMoveOutOf?: (sender: Mathfield, direction: "forward" | "backward"): boolean A hook invoked when keyboard navigation would cause the insertion point to leave the mathfield. • direction indicates the direction of the navigation, either "forward" or "backward". Return false to prevent the move, true to wrap around to the start of the field. By default, the insertion point will wrap around. onTabOutOf?: (sender: Mathfield, direction: "forward" | "backward"): boolean A hook invoked when pressing tab (or shift-tab) would cause the insertion point to leave the mathfield. direction indicates the direction of the navigation, either "forward" or "backward". By default, the insertion point jumps to the next/previous focussable element. ### module "config"interface MathfieldListenersPermalink The methods provide a notification that an event is about to occur or has occured. onBlur?: (sender: Mathfield): void The mathfield has lost keyboard focus onContentDidChange?: (sender: Mathfield): void onContentWillChange?: (sender: Mathfield): void onFocus?: (sender: Mathfield): void The mathfield has gained keyboard focus onModeChange?: (sender: Mathfield, mode: ParseMode): void onReadAloudStatus?: (sender: Mathfield): void onSelectionDidChange?: (sender: Mathfield): void onSelectionWillChange?: (sender: Mathfield): void onUndoStateDidChange?: UndoStateChangeListener onUndoStateWillChange?: UndoStateChangeListener onVirtualKeyboardToggle?: (sender: Mathfield, visible: boolean, keyboardElement: HTMLElement): void ### module "config"Types ### module "config"EditingOptionsPermalink ignoreSpacebarInMathMode?: boolean; When true and the spacebar is pressed, no space is inserted. When false, a space is inserted when the spacebar is pressed. readOnly?: boolean; When true, the user cannot edit the mathfield. removeExtraneousParentheses?: boolean; If true, extra parentheses around a numerator or denominator are removed automatically. scriptDepth?: number | [number, number]; This option controls how many levels of subscript/superscript can be entered. For example, if scriptDepth is “1”, there can be one level of superscript or subscript. Attempting to enter a superscript while inside a superscript will be rejected. Setting a value of 0 will prevent entry of any superscript or subscript (but not limits for sum, integrals, etc…) This can make it easier to enter equations that fit what’s expected for the domain where the mathfield is used. To control the depth of superscript and subscript independently, provide an array: the first element indicate the maximum depth for subscript and the second element the depth of superscript. Thus, a value of [0, 1] would suppress the entry of subscripts, and allow one level of superscripts. smartFence?: boolean; When true and an open fence is entered via typedText() it will generate a contextually appropriate markup, for example using \left...\right if applicable. When false, the literal value of the character will be inserted instead. smartMode?: boolean; When true, during text input the field will switch automatically between ‘math’ and ‘text’ mode depending on what is typed and the context of the formula. If necessary, what was previously typed will be ‘fixed’ to account for the new info. For example, when typing “if x >0”: • “i” -> math mode, imaginary unit • “if” -> text mode, english word “if” • “if x” -> all in text mode, maybe the next word is xylophone? • “if x >” -> “if” stays in text mode, but now “x >” is in math mode • “if x > 0” -> “if” in text mode, “x > 0” in math mode Smart Mode is off by default. Manually switching mode (by typing alt/option+=) will temporarily turn off smart mode. Examples • slope = rise/run • If x > 0, then f(x) = sin(x) • x^2 + sin (x) when x > 0 • When x<0, x^{2n+1}<0 • Graph x^2 -x+3 =0 for 0<=x<=5 • Divide by x-3 and then add x^2-1 to both sides • Given g(x) = 4x – 3, when does g(x)=0? • Let D be the set {(x,y)|0<=x<=1 and 0<=y<=x} • \int_{the unit square} f(x,y) dx dy • For all n in NN smartSuperscript?: boolean; When true, when a digit is entered in an empty superscript, the cursor leaps automatically out of the superscript. This makes entry of common polynomials easier and faster. If entering other characters (for example “n+1”) the navigation out of the superscript must be done manually (by using the cursor keys or the spacebar to leap to the next insertion point). When false, the navigation out of the superscript must always be done manually. ### module "config"InlineShortcutsOptionsPermalink inlineShortcutTimeout?: number; Maximum time, in milliseconds, between consecutive characters for them to be considered part of the same shortcut sequence. A value of 0 is the same as infinity: any consecutive character will be candidate for an inline shortcut, regardless of the interval between this character and the previous one. A value of 750 will indicate that the maximum interval between two characters to be considered part of the same inline shortcut sequence is 3/4 of a second. This is useful to enter “±” as a sequence of two characters, while also supporting the “±” shortcut with the same sequence. The first result can be entered by pausing slightly between the first and second character if this option is set to a value of 250 or so. Note that some operations, such as clicking to change the selection, or losing the focus on the mathfield, will automatically timeout the shortcuts. inlineShortcuts?: {[key: string]: InlineShortcutDefinition}; The keys of this object literal indicate the sequence of characters that will trigger an inline shortcut. string | {after?: string; mode?: ParseMode; value: string} overrideDefaultInlineShortcuts?: boolean; deprecated #### deprecated Use: mf.setConfig( 'inlineShortcuts', { ...mf.getConfig('inlineShortcuts'), ...newShortcuts } )  to add newShortcuts to the default ones ### module "config"LayoutOptionsPermalink defaultMode?: "math" | "text"; horizontalSpacingScale?: number; Scaling factor to be applied to horizontal spacing between elements of the formula. A value greater than 1.0 can be used to improve the legibility. letterShapeStyle?: "auto" | "tex" | "iso" | "french" | "upright"; Control the letter shape style: letterShapeStylexyzABCαβɣΓΔΘ isoitititit texitititup frenchitupupup uprightupupupup (it) = italic (up) = upright The default letter shape style is auto, which indicates that french should be used if the locale is “french”, and tex otherwise. #### Historical Note Where do the “french” rules come from? The TeX standard font, Computer Modern, is based on Monotype 155M, itself based on the Porson greek font which was one of the most widely used Greek fonts in english-speaking countries. This font had upright capitals, but slanted lowercase. In France, the traditional font for greek was Didot, which has both upright capitals and lowercase. As for roman uppercase, they are recommended by “Lexique des règles typographiques en usage à l’Imprimerie Nationale”. It should be noted that this convention is not universally followed. macros?: MacroDictionary; A dictionary of LaTeX macros to be used to interpret and render the content. For example: mf.setConfig({ macros: { smallfrac: '^{#1}\\!\\!/\\!_{#2}', }, });  The code above will support the following notation: \smallfrac{5}{16}  ### module "config"LocalizationOptionsPermalink locale?: string; The locale (language + region) to use for string localization. If not is provided, the locale of the browser is used. strings?: {[locale: string]: {[key: string]: string}}; An object whose keys are a locale string, and whose values are an object of string identifier to localized string. Example { "fr-CA": { "tooltip.undo": "Annuler", "tooltip.redo": "Refaire", } }  This will override the default localized strings. ### module "config"MathfieldConfigPermalink • namespace Namespace that is added to data- attributes to avoid collisions with other libraries. It is empty by default. The namespace should be a string of lowercase letters. • onError An optional listener function that will be invoked when an error is encountered while parsing some Latex. This could be the initial value of the mathfield, a value inserted programmatically later, or through a user interaction (pasting in the mathfield for example). See ParserErrorCode for the list of possible errors. • substituteTextArea A function that returns a focusable element that can be used to capture text input. An (invisible) DOM element is used to capture the keyboard events. By default, this element is a <textarea> on desktop and a <span> on mobile devices, to prevent the device virtual keyboard from being displayed. This function provides the option of substituting the DOM element used for keyboard capture. Alternatively, the ID of a DOM element can be provided. ### module "config"TextToSpeechOptionsPermalink readAloudHook?: (element: HTMLElement, text: string, config: MathfieldConfig): void; speakHook?: (text: string, config: MathfieldConfig): void; speechEngine?: "local" | "amazon"; Indicates which speech engine to use for speech output. Use local to use the OS-specific TTS engine. Use amazon for Amazon Text-to-Speech cloud API. You must include the AWS API library and configure it with your API key before use. speechEngineRate?: string; Sets the speed of the selected voice. One of x-slow, slow, medium, fast, x-fast or a value as a percentage. Range is 20% to 200% For example 200% to indicate a speaking rate twice the default rate. speechEngineVoice?: string; Indicates the voice to use with the speech engine. This is dependent on the speech engine. For Amazon Polly, see here: https://docs.aws.amazon.com/polly/latest/dg/voicelist.html textToSpeechMarkup?: "" | "ssml" | "ssml_step" | "mac"; The markup syntax to use for the output of conversion to spoken text. Possible values are ssml for the SSML markup or mac for the macOS markup, i.e. &#91;&#91;ltr&#93;&#93;. textToSpeechRules?: "mathlive" | "sre"; Specify which set of text to speech rules to use. A value of mathlive indicates that the simple rules built into MathLive should be used. A value of sre indicates that the Speech Rule Engine from Volker Sorge should be used. #### Caution SRE is not included or loaded by MathLive. For this option to work SRE should be loaded separately. textToSpeechRulesOptions?: {[key: string]: string}; A set of key/value pairs that can be used to configure the speech rule engine. Which options are available depends on the speech rule engine in use. There are no options available with MathLive’s built-in engine. The options for the SRE engine are documented here ### module "config"UndoStateChangeListenerPermalink (target: Mathfield, action: "undo" | "redo" | "snapshot"): void ### module "config"VirtualKeyboardOptionsPermalink customVirtualKeyboardLayers?: {[layer: string]: string}; Some additional custom virtual keyboard layers. A keyboard is made up of one or more layers (think of the main layer and the shift layer on a hardware keyboard). Each key in this object define a new keyboard layer (or replace an existing one). The value of the key should be some HTML markup. customVirtualKeyboards?: {[layer: string]: string}; keypressSound?: string | HTMLAudioElement| {default: string | HTMLAudioElement; delete?: string | HTMLAudioElement; return?: string | HTMLAudioElement; spacebar?: string | HTMLAudioElement}; When a key on the virtual keyboard is pressed, produce a short audio feedback. The value should be either a URL to a sound file or an object with the following keys: • delete URL to a sound file played when the delete key is pressed • return … when the return/tab key is pressed • spacebar … when the spacebar is pressed • default … when any other key is pressed. This key is required, the others are optional. If they are missing, this sound is played as well. keypressVibration?: boolean; When a key on the virtual keyboard is pressed, produce a short haptic feedback, if the device supports it. plonkSound?: string | HTMLAudioElement; URL to a sound file which will be played to provide feedback when a command has no effect, for example when pressing the spacebar at the root level. virtualKeyboardLayout?: "auto" | "qwerty" | "azerty" | "qwertz" | "dvorak" | "colemak"; virtualKeyboardMode?: "auto" | "manual" | "onfocus" | "off"; • 'manual': pressing the virtual keyboard toggle button will show or hide the virtual keyboard. If hidden, the virtual keyboard is not shown when the field is focused until the toggle button is pressed. • 'onfocus': the virtual keyboard will be displayed whenever the field is focused and hidden when the field loses focus. In that case, the virtual keyboard toggle button is not displayed. • 'off': the virtual keyboard toggle button is not displayed, and the virtual keyboard is never triggered. If the setting is empty, it will default to 'onfocus' on touch-capable devices and to 'off' otherwise. virtualKeyboardTheme?: "material" | "apple" | ""; The visual theme used for the virtual keyboard. If empty, the theme will switch automatically based on the device it’s running on. The two supported themes are ‘material’ and ‘apple’ (the default). virtualKeyboardToggleGlyph?: string; If specified, the markup to be used to display the virtual keyboard toggle glyph. If none is specified a default keyboard icon is used. virtualKeyboards?: "all" | "numeric" | "roman" | "greek" | "functions" | "command" | string; A space separated list of the keyboards that should be available. The keyboard 'all' is synonym with 'numeric', 'roman', 'greek', 'functions' and 'command' The keyboards will be displayed in the order indicated. ## module "commands"Permalink ## module "commands"interface CommandsPermalink Commands return true if they resulted in a dirty state #### Array #### Auto-complete #### Clipboard #### Scrolling #### Selection #### Other ### Array ### interface Commandscommand​addColumnAfterPermalink mathfield.perform("addColumnAfter"): boolean ### interface Commandscommand​addColumnBeforePermalink mathfield.perform("addColumnBefore"): boolean ### interface Commandscommand​addRowAfterPermalink mathfield.perform("addRowAfter"): boolean ### interface Commandscommand​addRowBeforePermalink mathfield.perform("addRowBefore"): boolean ### Auto-complete ### interface Commandscommand​completePermalink mathfield.perform("complete"): boolean ### interface Commandscommand​nextSuggestionPermalink mathfield.perform("nextSuggestion"): boolean ### interface Commandscommand​previousSuggestionPermalink mathfield.perform("previousSuggestion"): boolean ### Clipboard ### interface Commandscommand​copyToClipboardPermalink mathfield.perform("copyToClipboard"): boolean ### interface Commandscommand​cutToClipboardPermalink mathfield.perform("cutToClipboard"): boolean ### interface Commandscommand​pasteFromClipboardPermalink mathfield.perform("pasteFromClipboard"): boolean ### Scrolling ### interface Commandscommand​scrollIntoViewPermalink mathfield.perform("scrollIntoView"): boolean ### interface Commandscommand​scrollToEndPermalink mathfield.perform("scrollToEnd"): boolean ### interface Commandscommand​scrollToStartPermalink mathfield.perform("scrollToStart"): boolean ### Selection ### interface Commandscommand​extendDownPermalink mathfield.perform("extendDown"): boolean ### interface Commandscommand​extendToGroupEndPermalink mathfield.perform("extendToGroupEnd"): boolean ### interface Commandscommand​extendToGroupStartPermalink mathfield.perform("extendToGroupStart"): boolean ### interface Commandscommand​extendToMathFieldEndPermalink mathfield.perform("extendToMathFieldEnd"): boolean ### interface Commandscommand​extendToMathFieldStartPermalink mathfield.perform("extendToMathFieldStart"): boolean ### interface Commandscommand​extendToNextBoundaryPermalink mathfield.perform("extendToNextBoundary"): boolean ### interface Commandscommand​extendToNextCharPermalink mathfield.perform("extendToNextChar"): boolean ### interface Commandscommand​extendToNextWordPermalink mathfield.perform("extendToNextWord"): boolean ### interface Commandscommand​extendToPreviousBoundaryPermalink mathfield.perform("extendToPreviousBoundary"): boolean ### interface Commandscommand​extendToPreviousCharPermalink mathfield.perform("extendToPreviousChar"): boolean ### interface Commandscommand​extendToPreviousWordPermalink mathfield.perform("extendToPreviousWord"): boolean ### interface Commandscommand​extendUpPermalink mathfield.perform("extendUp"): boolean ### interface Commandscommand​moveAfterParentPermalink mathfield.perform("moveAfterParent"): boolean ### interface Commandscommand​moveBeforeParentPermalink mathfield.perform("moveBeforeParent"): boolean ### interface Commandscommand​moveDownPermalink mathfield.perform("moveDown"): boolean ### interface Commandscommand​moveToGroupEndPermalink mathfield.perform("moveToGroupEnd"): boolean ### interface Commandscommand​moveToGroupStartPermalink mathfield.perform("moveToGroupStart"): boolean ### interface Commandscommand​moveToMathFieldEndPermalink mathfield.perform("moveToMathFieldEnd"): boolean ### interface Commandscommand​moveToMathFieldStartPermalink mathfield.perform("moveToMathFieldStart"): boolean ### interface Commandscommand​moveToNextCharPermalink mathfield.perform("moveToNextChar"): boolean ### interface Commandscommand​moveToNextPlaceholderPermalink mathfield.perform("moveToNextPlaceholder"): boolean ### interface Commandscommand​moveToNextWordPermalink mathfield.perform("moveToNextWord"): boolean ### interface Commandscommand​moveToOppositePermalink mathfield.perform("moveToOpposite"): boolean ### interface Commandscommand​moveToPreviousCharPermalink mathfield.perform("moveToPreviousChar"): boolean ### interface Commandscommand​moveToPreviousPlaceholderPermalink mathfield.perform("moveToPreviousPlaceholder"): boolean ### interface Commandscommand​moveToPreviousWordPermalink mathfield.perform("moveToPreviousWord"): boolean ### interface Commandscommand​moveToSuperscriptPermalink mathfield.perform("moveToSuperscript"): boolean ### interface Commandscommand​moveUpPermalink mathfield.perform("moveUp"): boolean ### interface Commandscommand​selectAllPermalink mathfield.perform("selectAll"): boolean ### interface Commandscommand​selectGroupPermalink mathfield.perform("selectGroup"): boolean ### Other ### interface Commandscommand​deleteAllPermalink mathfield.perform("deleteAll"): boolean ### interface Commandscommand​enterCommandModePermalink mathfield.perform("enterCommandMode"): boolean #### deprecated The command mode will be dropped in a future release. ### interface Commandscommand​insertPermalink mathfield.perform(["insert", s: string, options: any]): boolean s: string options: any ### interface Commandscommand​performWithFeedbackPermalink mathfield.perform(["performWithFeedback", command: string]): boolean command: string Perform a command and include interactive feedback such as sound and haptic feedback. This is useful to simulate user interaction, for example for commands from the virtual keyboard ### interface Commandscommand​redoPermalink mathfield.perform("redo"): boolean ### interface Commandscommand​speakPermalink mathfield.perform(["speak", scope: SpeechScope, options: {withHighlighting: boolean}]): boolean scope: SpeechScope options: withHighlighting: boolean; In addition to speaking the requested portion of the formula, visually highlight it as it is read (read aloud functionality) ### interface Commandscommand​switchModePermalink mathfield.perform(["switchMode", mode: ParseMode]): boolean mode: ParseMode ### interface Commandscommand​toggleKeystrokeCaptionPermalink mathfield.perform("toggleKeystrokeCaption"): boolean ### interface Commandscommand​typedTextPermalink mathfield.perform(["typedText", options: {feedback: boolean; focus: boolean; simulateKeystroke: boolean}]): boolean options: feedback: boolean; If true, provide audio and haptic feedback focus: boolean; If true, the mathfield will be focused simulateKeystroke: boolean; If true, generate some synthetic keystrokes (useful to trigger inline shortcuts, for example). ### interface Commandscommand​undoPermalink mathfield.perform("undo"): boolean ### module "commands"Types ### module "commands"SelectorPermalink Keys<Commands> ### module "commands"SpeechScopePermalink How much of the formula should be spoken: allthe entire formula selectionthe selection portion of the formula leftthe element to the left of the selection rightthe element to the right of the selection groupthe group (numerator, root, etc…) the selection is in parentthe parent of the selection "all" | "selection" | "left" | "right" | "group" | "parent" ## module "shortcuts"Permalink ### module "shortcuts"InlineShortcutDefinitionPermalink An inline shortcut can be specified as a simple string or as an object literal with additional options:  config.inlineShortcuts = { half: '\\frac{1}{2}', in: { mode: 'math', after: 'space+letter+digit+symbol+fence', value: '\\in', }, };  When using a string, the shortcut will apply in any mode, and regardless of the characters surrounding it. When using an object literal the value key is required an indicate the shortcut substitution. The mode key, if present, indicate which mode this shortcut will apply in, either 'math' or 'text'. If the key is not present the shortcut apply in all modes. The 'after' key, if present, indicate in what context (surrounding characters) the shortcut will apply. One or more values can be specified, separated by a ‘+’ sign. If any of the values match, the shortcut will be applicable. Possible values are: 'space'A spacing command, such as \quad 'nothing'The begining of a group 'surd'A square root or n-th root 'frac'A fraction 'function'A function such as \sin or f 'letter'A letter, such as x or n 'digit'0 through 9 'binop'A binary operator, such as + 'relop'A relational operator, such as = 'punct'A punctuation mark, such as , 'array'An array, such as a matrix or cases statement 'openfence'An opening fence, such as ( 'closefence'A closing fence such as } 'text'Some plain text • | string • | {after?: string; mode?: ParseMode; value: string} ## module "core"Permalink ### module "core"interface StylePermalink backgroundColor?: string color?: string cssClass?: string cssId?: string fontFamily?: string fontSeries?: FontSeries fontShape?: FontShape fontSize?: string letterShapeStyle?: "tex" | "french" | "iso" | "upright" | "auto" mode?: ParseMode | string variant?: Variant variantStyle?: VariantStyle ### module "core"Types ### module "core"FontSeriesPermalink "auto" | "m" | "b" | "l" | "" ### module "core"FontShapePermalink "auto" | "n" | "it" | "sl" | "sc" | "" ### module "core"MacroDefinitionPermalink args?: number; def: string; ### module "core"MacroDictionaryPermalink A dictionary of LaTeX macros to be used to interpret and render the content. For example: mf.$setConfig({
macros: {
smallfrac: '^{#1}\\!\\!/\\!_{#2}',
},
});


The code above will support the following notation:

\smallfrac{5}{16}


[name: string]: string | MacroDefinition

The mode that indicates how a portion of content is interpreted

#### deprecated

The 'command’mode will be dropped in a future release

"math" | "text" | "command"

Error code passed to the ParserErrorListener function.

unknown-commandThere is no definition available for this command, e.g. \zin
invalid-commandThis command is not valid in the current mode (e.g. text command in math mode)
unbalanced-bracesThere are too many or too few { or }
unbalanced-environmentAn environment was open but never closed (\begin{array}}
missing-argumentA required argument is missing, e.g. \frac{2}
too-many-infix-commandsA group can include only one infix command (i.e. \choose, \atop). In general it’s best to avoid infix commands.
unexpected-command-in-stringA command expected a string argument, but there was a command instead
missing-unitAn argument requiring a dimension was missing an unit.
unexpected-delimiterAn invalid symbol or command was used as a delimiter.
unexpected-tokenAn unexpected character was encountered.
unexpected-end-of-stringThe end of the string was reached, but some required arguments were missing.

"unknown-command" | "invalid-command" | "unbalanced-braces" | "unbalanced-environment" | "missing-argument" | "too-many-infix-commands" | "unexpected-command-in-string" | "missing-unit" | "unexpected-delimiter" | "unexpected-token" | "unexpected-end-of-string"

(err: {after?: string; arg?: string; before?: string; code: ParserErrorCode; latex?: string}): void

Variants indicate a stylistic alternate for some characters.

Typically, those are controlled with explicit commands, such as \mathbb{} or \mathfrak{}. This type is used with the applyStyle function to change the styling of a range of selected characters.

In mathematical notation these variants are used not only for visual presentation, but they may have semantic significance.

For example, the set ℂ should not be confused with the physical unit 𝖢 (Coulomb).

When rendered, these variants can map to some built-in fonts. Latex supports a limited set of characters. However, MathLive will map characters not supported by Latex fonts(double-stuck variant for digits for example) to a Unicode character (see Mathematical Alphanumeric Symbols on Wikipedia ).

normal is a synthetic variant that maps either to main (roman) or math (italic) depending on the symbol and the letterShapeStyle.

The math variant has italic characters as well as slightly different letter shape and spacing (a bit more space after the “f” for example), so it’s not completely equivalent to a main variant with italic variant style applied.

"ams" | "double-struck" | "calligraphic" | "script" | "fraktur" | "sans-serif" | "monospace" | "normal" | "main" | "math"

Some variants support stylistic variations.

Note that these stylistic variations support a limited set of characters, typically just uppercase and lowercase letters, and digits 0-9 in some cases.

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

"up" | "bold" | "italic" | "bolditalic" | ""

Documentation built with grok