itutor-mathlive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"><title>mathlive.js - MathLive Docs</title><meta name="description" content="Beautifully typeset math made easy"><meta name="keywords" content="latex, tex, math, typesetting, documentation, docs"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:400,400i,700,900" rel="stylesheet"> <style>pre.prettyprint{background: #35434e;}</style> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow-night.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> <link type="text/css" rel="stylesheet" href="styles/custom.css"> </head> <body> <div class="forkme"><a href="https://github.com/arnog/mathlive"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:1;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a></div> <section role="navigation"> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav id="nav"> <h3 class="group-title home"><a href="index.html">MathLive Docs</a></h3><input class="search" placeholder="Search" type="text"><div class="list"><h3 class="group-title">Tutorials</h3><ul><li><a href="tutorial-CONTRIBUTOR_GUIDE.html">Contributor Guide</a></li><li><a href="tutorial-MASTON.html">MASTON</a></li><li><a href="tutorial-USAGE_GUIDE.html">Usage Guide</a></li></ul><h3 class="group-title">Classes</h3><ul><li class="private"><a href="Context.html" class="className">Context</a><ul class='methods private'><li data-type='method' class='private'><a href="Context.html#clone" class="methodName">clone</a></li><li data-type='method' class='private'><a href="Context.html#cloneWith" class="methodName">cloneWith</a></li><li data-type='method' class='private'><a href="Context.html#getBackgroundColor" class="methodName">getBackgroundColor</a></li><li data-type='method' class='private'><a href="Context.html#getColor" class="methodName">getColor</a></li><li data-type='method' class='private'><a href="Context.html#setMathstyle" class="methodName">setMathstyle</a></li><li data-type='method' class='private'><a href="Context.html#withMathstyle" class="methodName">withMathstyle</a></li></ul></li><li><a href="EditableMathlist.html" class="className">EditableMathlist</a><ul class='methods'><li data-type='method'><a href="EditableMathlist.html#_addCell" class="methodName">_addCell</a></li><li data-type='method'><a href="EditableMathlist.html#_deleteAtoms" class="methodName">_deleteAtoms</a></li><li data-type='method'><a href="EditableMathlist.html#addColumnAfter_" class="methodName">addColumnAfter_</a></li><li data-type='method'><a href="EditableMathlist.html#addColumnBefore_" class="methodName">addColumnBefore_</a></li><li data-type='method'><a href="EditableMathlist.html#addRowAfter_" class="methodName">addRowAfter_</a></li><li data-type='method'><a href="EditableMathlist.html#addRowBefore_" class="methodName">addRowBefore_</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#ancestor" class="methodName">ancestor</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#anchor" class="methodName">anchor</a></li><li data-type='method'><a href="EditableMathlist.html#applyStyle" class="methodName">applyStyle</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#commandOffsets" class="methodName">commandOffsets</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#commitCommandStringBeforeInsertionPoint" class="methodName">commitCommandStringBeforeInsertionPoint</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#contains" class="methodName">contains</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#decorateCommandStringAroundInsertionPoint" class="methodName">decorateCommandStringAroundInsertionPoint</a></li><li data-type='method'><a href="EditableMathlist.html#delete" class="methodName">delete</a></li><li data-type='method'><a href="EditableMathlist.html#delete_" class="methodName">delete_</a></li><li data-type='method'><a href="EditableMathlist.html#deleteAll_" class="methodName">deleteAll_</a></li><li data-type='method'><a href="EditableMathlist.html#deleteNextChar_" class="methodName">deleteNextChar_</a></li><li data-type='method'><a href="EditableMathlist.html#deleteNextWord_" class="methodName">deleteNextWord_</a></li><li data-type='method'><a href="EditableMathlist.html#deletePreviousChar_" class="methodName">deletePreviousChar_</a></li><li data-type='method'><a href="EditableMathlist.html#deletePreviousWord_" class="methodName">deletePreviousWord_</a></li><li data-type='method'><a href="EditableMathlist.html#deleteToGroupEnd_" class="methodName">deleteToGroupEnd_</a></li><li data-type='method'><a href="EditableMathlist.html#deleteToGroupStart_" class="methodName">deleteToGroupStart_</a></li><li data-type='method'><a href="EditableMathlist.html#deleteToMathFieldEnd_" class="methodName">deleteToMathFieldEnd_</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#endOffset" class="methodName">endOffset</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#extend" class="methodName">extend</a></li><li data-type='method'><a href="EditableMathlist.html#extendDown_" class="methodName">extendDown_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToGroupEnd_" class="methodName">extendToGroupEnd_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToGroupStart_" class="methodName">extendToGroupStart_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToMathFieldEnd_" class="methodName">extendToMathFieldEnd_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToMathFieldStart_" class="methodName">extendToMathFieldStart_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToNextBoundary_" class="methodName">extendToNextBoundary_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToNextChar_" class="methodName">extendToNextChar_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToNextWord_" class="methodName">extendToNextWord_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToPreviousBoundary_" class="methodName">extendToPreviousBoundary_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToPreviousChar_" class="methodName">extendToPreviousChar_</a></li><li data-type='method'><a href="EditableMathlist.html#extendToPreviousWord_" class="methodName">extendToPreviousWord_</a></li><li data-type='method'><a href="EditableMathlist.html#extendUp_" class="methodName">extendUp_</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#extractCharactersBeforeInsertionPoint" class="methodName">extractCharactersBeforeInsertionPoint</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#extractCommandStringAroundInsertionPoint" class="methodName">extractCommandStringAroundInsertionPoint</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#extractContents" class="methodName">extractContents</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#extractContentsOrdInGroupBeforeInsertionPoint" class="methodName">extractContentsOrdInGroupBeforeInsertionPoint</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#filter" class="methodName">filter</a></li><li data-type='method'><a href="EditableMathlist.html#insert" class="methodName">insert</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#insertFirstAtom" class="methodName">insertFirstAtom</a></li><li data-type='method'><a href="EditableMathlist.html#isCollapsed" class="methodName">isCollapsed</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#jump" class="methodName">jump</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#leap" class="methodName">leap</a></li><li data-type='method'><a href="EditableMathlist.html#moveAfterParent_" class="methodName">moveAfterParent_</a></li><li data-type='method'><a href="EditableMathlist.html#moveBeforeParent_" class="methodName">moveBeforeParent_</a></li><li data-type='method'><a href="EditableMathlist.html#moveDown_" class="methodName">moveDown_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToGroupEnd_" class="methodName">moveToGroupEnd_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToGroupStart_" class="methodName">moveToGroupStart_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToMathFieldEnd_" class="methodName">moveToMathFieldEnd_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToMathFieldStart_" class="methodName">moveToMathFieldStart_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToNextChar_" class="methodName">moveToNextChar_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToNextPlaceholder_" class="methodName">moveToNextPlaceholder_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToNextWord_" class="methodName">moveToNextWord_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToOpposite_" class="methodName">moveToOpposite_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToPreviousChar_" class="methodName">moveToPreviousChar_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToPreviousPlaceholder_" class="methodName">moveToPreviousPlaceholder_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToPreviousWord_" class="methodName">moveToPreviousWord_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToSubscript_" class="methodName">moveToSubscript_</a></li><li data-type='method'><a href="EditableMathlist.html#moveToSuperscript_" class="methodName">moveToSuperscript_</a></li><li data-type='method'><a href="EditableMathlist.html#moveUp_" class="methodName">moveUp_</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#next" class="methodName">next</a></li><li data-type='method'><a href="EditableMathlist.html#selectAll_" class="methodName">selectAll_</a></li><li data-type='method'><a href="EditableMathlist.html#selectGroup_" class="methodName">selectGroup_</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#setExtent" class="methodName">setExtent</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#setRange" class="methodName">setRange</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#setSelection" class="methodName">setSelection</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#sibling" class="methodName">sibling</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#siblings" class="methodName">siblings</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#skip" class="methodName">skip</a></li><li data-type='method'><a href="EditableMathlist.html#speakAll_" class="methodName">speakAll_</a></li><li data-type='method'><a href="EditableMathlist.html#speakAllWithSynchronizedHighlighting_" class="methodName">speakAllWithSynchronizedHighlighting_</a></li><li data-type='method'><a href="EditableMathlist.html#speakGroup_" class="methodName">speakGroup_</a></li><li data-type='method'><a href="EditableMathlist.html#speakLeftSibling_" class="methodName">speakLeftSibling_</a></li><li data-type='method'><a href="EditableMathlist.html#speakParent_" class="methodName">speakParent_</a></li><li data-type='method'><a href="EditableMathlist.html#speakRightSibling_" class="methodName">speakRightSibling_</a></li><li data-type='method'><a href="EditableMathlist.html#speakSelection_" class="methodName">speakSelection_</a></li><li data-type='method'><a href="EditableMathlist.html#speakSelectionWithSynchronizedHighlighting_" class="methodName">speakSelectionWithSynchronizedHighlighting_</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#startOffset" class="methodName">startOffset</a></li><li data-type='method' class='private'><a href="EditableMathlist.html#toString" class="methodName">toString</a></li><li data-type='method'><a href="EditableMathlist.html#transpose_" class="methodName">transpose_</a></li></ul></li><li class="private"><a href="Lexer.html" class="className">Lexer</a><ul class='methods private'><li data-type='method' class='private'><a href="Lexer.html#end" class="methodName">end</a></li><li data-type='method' class='private'><a href="Lexer.html#get" class="methodName">get</a></li><li data-type='method' class='private'><a href="Lexer.html#isWhiteSpace" class="methodName">isWhiteSpace</a></li><li data-type='method' class='private'><a href="Lexer.html#makeToken" class="methodName">makeToken</a></li><li data-type='method' class='private'><a href="Lexer.html#peek" class="methodName">peek</a></li><li data-type='method' class='private'><a href="Lexer.html#scan" class="methodName">scan</a></li></ul></li><li class="private"><a href="MathAtom.html" class="className">MathAtom</a><ul class='methods private'><li data-type='method' class='private'><a href="MathAtom.html#.toSpeakableText" class="methodName">toSpeakableText</a></li><li data-type='method' class='private'><a href="MathAtom.html#bind" class="methodName">bind</a></li><li data-type='method' class='private'><a href="MathAtom.html#decompose" class="methodName">decompose</a></li><li data-type='method' class='private'><a href="MathAtom.html#decomposeGenfrac" class="methodName">decomposeGenfrac</a></li><li data-type='method' class='private'><a href="MathAtom.html#decomposeLeftright" class="methodName">decomposeLeftright</a></li><li data-type='method' class='private'><a href="MathAtom.html#decomposeLine" class="methodName">decomposeLine</a></li><li data-type='method' class='private'><a href="MathAtom.html#decomposeRule" class="methodName">decomposeRule</a></li><li data-type='method' class='private'><a href="MathAtom.html#filter" class="methodName">filter</a></li><li data-type='method' class='private'><a href="MathAtom.html#makeSpan" class="methodName">makeSpan</a></li></ul></li><li><a href="MathField.html" class="className">MathField</a><ul class='methods'><li data-type='method' class='private'><a href="MathField.html#_getCaretPosition" class="methodName">_getCaretPosition</a></li><li data-type='method' class='private'><a href="MathField.html#_onKeystroke" class="methodName">_onKeystroke</a></li><li data-type='method' class='private'><a href="MathField.html#complete_" class="methodName">complete_</a></li><li data-type='method'><a href="MathField.html#el" class="methodName">el</a></li><li data-type='method' class='private'><a href="MathField.html#enterCommandMode_" class="methodName">enterCommandMode_</a></li><li data-type='method'><a href="MathField.html#insert" class="methodName">insert</a></li><li data-type='method'><a href="MathField.html#keystroke" class="methodName">keystroke</a></li><li data-type='method'><a href="MathField.html#latex" class="methodName">latex</a></li><li data-type='method'><a href="MathField.html#perform" class="methodName">perform</a></li><li data-type='method'><a href="MathField.html#perform" class="methodName">perform</a></li><li data-type='method' class='private'><a href="MathField.html#render" class="methodName">render</a></li><li data-type='method'><a href="MathField.html#revertToOriginalContent" class="methodName">revertToOriginalContent</a></li><li data-type='method'><a href="MathField.html#selectedText" class="methodName">selectedText</a></li><li data-type='method'><a href="MathField.html#selectionAtEnd" class="methodName">selectionAtEnd</a></li><li data-type='method'><a href="MathField.html#selectionAtStart" class="methodName">selectionAtStart</a></li><li data-type='method'><a href="MathField.html#selectionDepth" class="methodName">selectionDepth</a></li><li data-type='method'><a href="MathField.html#selectionIsCollapsed" class="methodName">selectionIsCollapsed</a></li><li data-type='method'><a href="MathField.html#setConfig" class="methodName">setConfig</a></li><li data-type='method'><a href="MathField.html#text" class="methodName">text</a></li><li data-type='method'><a href="MathField.html#typedText" class="methodName">typedText</a></li></ul></li><li class="private"><a href="module-mathstyle.Mathstyle.html" class="className">Mathstyle</a></li><li class="private"><a href="Parser.html" class="className">Parser</a><ul class='methods private'><li data-type='method' class='private'><a href="Parser.html#end" class="methodName">end</a></li><li data-type='method' class='private'><a href="Parser.html#hasLiteral" class="methodName">hasLiteral</a></li><li data-type='method' class='private'><a href="Parser.html#hasLiteralPattern" class="methodName">hasLiteralPattern</a></li><li data-type='method' class='private'><a href="Parser.html#hasToken" class="methodName">hasToken</a></li><li data-type='method' class='private'><a href="Parser.html#lastMathAtom" class="methodName">lastMathAtom</a></li><li data-type='method' class='private'><a href="Parser.html#parseAtom" class="methodName">parseAtom</a></li><li data-type='method' class='private'><a href="Parser.html#parseKeyword" class="methodName">parseKeyword</a></li><li data-type='method' class='private'><a href="Parser.html#parseLimits" class="methodName">parseLimits</a></li><li data-type='method' class='private'><a href="Parser.html#parseSupSub" class="methodName">parseSupSub</a></li><li data-type='method' class='private'><a href="Parser.html#parseToken" class="methodName">parseToken</a></li><li data-type='method' class='private'><a href="Parser.html#scanArg" class="methodName">scanArg</a></li><li data-type='method' class='private'><a href="Parser.html#scanColor" class="methodName">scanColor</a></li><li data-type='method' class='private'><a href="Parser.html#scanDelim" class="methodName">scanDelim</a></li><li data-type='method' class='private'><a href="Parser.html#scanDimen" class="methodName">scanDimen</a></li><li data-type='method' class='private'><a href="Parser.html#scanEnvironment" class="methodName">scanEnvironment</a></li><li data-type='method' class='private'><a href="Parser.html#scanGroup" class="methodName">scanGroup</a></li><li data-type='method' class='private'><a href="Parser.html#scanImplicitGroup" class="methodName">scanImplicitGroup</a></li><li data-type='method' class='private'><a href="Parser.html#scanLeftRight" class="methodName">scanLeftRight</a></li><li data-type='method' class='private'><a href="Parser.html#scanModeSet" class="methodName">scanModeSet</a></li><li data-type='method' class='private'><a href="Parser.html#scanModeShift" class="methodName">scanModeShift</a></li><li data-type='method' class='private'><a href="Parser.html#scanNumber" class="methodName">scanNumber</a></li><li data-type='method' class='private'><a href="Parser.html#scanString" class="methodName">scanString</a></li><li data-type='method' class='private'><a href="Parser.html#scanToken" class="methodName">scanToken</a></li></ul></li><li class="private"><a href="Span.html" class="className">Span</a></li><li class="private"><a href="Token.html" class="className">Token</a></li><li class="private"><a href="UndoManager.html" class="className">UndoManager</a><ul class='methods private'><li data-type='method' class='private'><a href="UndoManager.html#canRedo" class="methodName">canRedo</a></li><li data-type='method' class='private'><a href="UndoManager.html#canUndo" class="methodName">canUndo</a></li><li data-type='method' class='private'><a href="UndoManager.html#redo" class="methodName">redo</a></li><li data-type='method' class='private'><a href="UndoManager.html#snapshot" class="methodName">snapshot</a></li><li data-type='method' class='private'><a href="UndoManager.html#undo" class="methodName">undo</a></li></ul></li></ul><h3 class="group-title">Modules</h3><ul><li class="private"><a href="module-color.html" class="className">color</a><ul class='methods private'><li data-type='method' class='private'><a href="module-color.html#.stringToColor" class="methodName">stringToColor</a></li></ul></li><li class="private"><a href="module-definitions.html" class="className">definitions</a><ul class='methods private'><li data-type='method' class='private'><a href="module-definitions.html#.defineEnvironment" class="methodName">defineEnvironment</a></li><li data-type='method' class='private'><a href="module-definitions.html#.defineFunction" class="methodName">defineFunction</a></li><li data-type='method' class='private'><a href="module-definitions.html#.defineSymbol" class="methodName">defineSymbol</a></li><li data-type='method' class='private'><a href="module-definitions.html#.defineSymbolRange" class="methodName">defineSymbolRange</a></li><li data-type='method' class='private'><a href="module-definitions.html#.defineSymbols" class="methodName">defineSymbols</a></li><li data-type='method' class='private'><a href="module-definitions.html#.frequency" class="methodName">frequency</a></li><li data-type='method' class='private'><a href="module-definitions.html#.getInfo" class="methodName">getInfo</a></li><li data-type='method' class='private'><a href="module-definitions.html#.matchCodepoint" class="methodName">matchCodepoint</a></li><li data-type='method' class='private'><a href="module-definitions.html#.matchFunction" class="methodName">matchFunction</a></li><li data-type='method' class='private'><a href="module-definitions.html#.parseParamTemplateArgument" class="methodName">parseParamTemplateArgument</a></li><li data-type='method' class='private'><a href="module-definitions.html#.suggest" class="methodName">suggest</a></li></ul></li><li class="private"><a href="module-delimiters.html" class="className">delimiters</a><ul class='methods private'><li data-type='method' class='private'><a href="module-delimiters.html#.makeCustomSizedDelim" class="methodName">makeCustomSizedDelim</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.makeInner" class="methodName">makeInner</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.makeLargeDelim" class="methodName">makeLargeDelim</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.makeLeftRightDelim" class="methodName">makeLeftRightDelim</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.makeNullFence" class="methodName">makeNullFence</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.makeSizedDelim" class="methodName">makeSizedDelim</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.makeSmallDelim" class="methodName">makeSmallDelim</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.makeStackedDelim" class="methodName">makeStackedDelim</a></li><li data-type='method' class='private'><a href="module-delimiters.html#.traverseSequence" class="methodName">traverseSequence</a></li></ul></li><li class="private"><a href="module-editor_editableMathlist.html" class="className">editor/editableMathlist</a><ul class='methods private'><li data-type='method' class='private'><a href="module-editor_editableMathlist.html#~atomContains" class="methodName">atomContains</a></li></ul></li><li class="private"><a href="module-editor_keyboard.html" class="className">editor/keyboard</a><ul class='methods private'><li data-type='method' class='private'><a href="module-editor_keyboard.html#.delegateKeyboardEvents" class="methodName">delegateKeyboardEvents</a></li><li data-type='method' class='private'><a href="module-editor_keyboard.html#.keyboardEventToString" class="methodName">keyboardEventToString</a></li></ul></li><li class="private"><a href="module-editor_mathfield.html" class="className">editor/mathfield</a><ul class='methods private'><li data-type='method' class='private'><a href="module-editor_mathfield.html#nearestElementFromPoint" class="methodName">nearestElementFromPoint</a></li></ul></li><li class="private"><a href="module-editor_mathpath.html" class="className">editor/mathpath</a><ul class='methods private'><li data-type='method' class='private'><a href="module-editor_mathpath.html#.pathCommonAncestor" class="methodName">pathCommonAncestor</a></li><li data-type='method' class='private'><a href="module-editor_mathpath.html#.pathDistance" class="methodName">pathDistance</a></li><li data-type='method' class='private'><a href="module-editor_mathpath.html#.pathFromString" class="methodName">pathFromString</a></li><li data-type='method' class='private'><a href="module-editor_mathpath.html#.pathToString" class="methodName">pathToString</a></li></ul></li><li class="private"><a href="module-editor_shortcuts.html" class="className">editor/shortcuts</a><ul class='methods private'><li data-type='method' class='private'><a href="module-editor_shortcuts.html#.match" class="methodName">match</a></li><li data-type='method' class='private'><a href="module-editor_shortcuts.html#.matchKeystroke" class="methodName">matchKeystroke</a></li><li data-type='method' class='private'><a href="module-editor_shortcuts.html#.platform" class="methodName">platform</a></li><li data-type='method' class='private'><a href="module-editor_shortcuts.html#.stringify" class="methodName">stringify</a></li></ul></li><li class="private"><a href="module-fontMetrics.html" class="className">fontMetrics</a><ul class='methods private'><li data-type='method' class='private'><a href="module-fontMetrics.html#.getCharacterMetrics" class="methodName">getCharacterMetrics</a></li></ul></li><li class="private"><a href="module-lexer.html" class="className">lexer</a><ul class='methods private'><li data-type='method' class='private'><a href="module-lexer.html#.tokenize" class="methodName">tokenize</a></li></ul></li><li class="private"><a href="module-mathAtom.html" class="className">mathAtom</a><ul class='methods private'><li data-type='method' class='private'><a href="module-mathAtom.html#.decompose" class="methodName">decompose</a></li><li data-type='method' class='private'><a href="module-mathAtom.html#.getFontName" class="methodName">getFontName</a></li><li data-type='method' class='private'><a href="module-mathAtom.html#.makeColGap" class="methodName">makeColGap</a></li><li data-type='method' class='private'><a href="module-mathAtom.html#.makeColOfRepeatingElements" class="methodName">makeColOfRepeatingElements</a></li><li data-type='method' class='private'><a href="module-mathAtom.html#.makeStack" class="methodName">makeStack</a></li></ul></li><li><a href="module-mathlive.html" class="className">mathlive</a><ul class='methods'><li data-type='method'><a href="module-mathlive.html#latexToAST" class="methodName">latexToAST</a></li><li data-type='method'><a href="module-mathlive.html#latexToMarkup" class="methodName">latexToMarkup</a></li><li data-type='method'><a href="module-mathlive.html#latexToMathML" class="methodName">latexToMathML</a></li><li data-type='method'><a href="module-mathlive.html#latexToSpeakableText" class="methodName">latexToSpeakableText</a></li><li data-type='method'><a href="module-mathlive.html#makeMathField" class="methodName">makeMathField</a></li><li data-type='method'><a href="module-mathlive.html#pauseReadAloud" class="methodName">pauseReadAloud</a></li><li data-type='method'><a href="module-mathlive.html#playReadAloud" class="methodName">playReadAloud</a></li><li data-type='method'><a href="module-mathlive.html#readAloud" class="methodName">readAloud</a></li><li data-type='method'><a href="module-mathlive.html#readAloudStatus" class="methodName">readAloudStatus</a></li><li data-type='method'><a href="module-mathlive.html#renderMathInDocument" class="methodName">renderMathInDocument</a></li><li data-type='method'><a href="module-mathlive.html#renderMathInElement" class="methodName">renderMathInElement</a></li><li data-type='method'><a href="module-mathlive.html#resumeReadAloud" class="methodName">resumeReadAloud</a></li><li data-type='method'><a href="module-mathlive.html#revertToOriginalContent" class="methodName">revertToOriginalContent</a></li><li data-type='method'><a href="module-mathlive.html#revertToOriginalContent" class="methodName">revertToOriginalContent</a></li></ul></li><li class="private"><a href="module-mathstyle.html" class="className">mathstyle</a><ul class='methods private'><li data-type='method' class='private'><a href="module-mathstyle.html#.toMathstyle" class="methodName">toMathstyle</a></li></ul></li><li class="private"><a href="module-span.html" class="className">span</a><ul class='methods private'><li data-type='method' class='private'><a href="module-span.html#.coalesce" class="methodName">coalesce</a></li><li data-type='method' class='private'><a href="module-span.html#.makeFontSizer" class="methodName">makeFontSizer</a></li><li data-type='method' class='private'><a href="module-span.html#.makeHlist" class="methodName">makeHlist</a></li><li data-type='method' class='private'><a href="module-span.html#.makeSpan" class="methodName">makeSpan</a></li><li data-type='method' class='private'><a href="module-span.html#.makeSpanOfType" class="methodName">makeSpanOfType</a></li><li data-type='method' class='private'><a href="module-span.html#.makeSymbol" class="methodName">makeSymbol</a></li><li data-type='method' class='private'><a href="module-span.html#.makeVlist" class="methodName">makeVlist</a></li><li data-type='method' class='private'><a href="module-span.html#.toString" class="methodName">toString</a></li></ul></li></ul><label class="checkbox"><input id="toggle-private" type="checkbox" onclick=" if (!document.getElementById('toggle-private').checked) { document.documentElement.classList.add('no-private') writeCookie('symbol-access', 'no-private') } else { document.documentElement.classList.remove('no-private') writeCookie('symbol-access', 'private') } ">Include Private Symbols</input></label></div> <footer role="contentInfo"> Made with <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a>. </footer> </nav> </section> <main id="main"> <h1 class="page-title">mathlive.js</h1> <section> <article> <pre class="prettyprint source linenums"> <code> /** * * The functions in this module are the main entry points to the MathLive * public API. * * To invoke these functions, use the global MathLive object. For example: * ```javascript * const markup = MathLive.toMarkup('e^{i\\pi}+1=0'); * ``` * * @module mathlive */ define([ 'mathlive/core/lexer', 'mathlive/core/mathAtom', 'mathlive/core/parser', 'mathlive/core/span', 'mathlive/core/definitions', 'mathlive/editor/editor-mathfield', 'mathlive/addons/auto-render', ], function(Lexer, MathAtom, ParserModule, Span, Definitions, MathField, AutoRender) { /** * Convert a LaTeX string to a string of HTML markup. * * @param {string} text A string of valid LaTeX. It does not have to start * with a mode token such as `$$` or `\(`. * * @param {string} displayMode If `'displaystyle'` the "display" mode of TeX * is used to typeset the formula. 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. * * @param {string} [format='html'] For debugging purposes, this function * can also return a text representation of internal data structures * used to construct the markup. Valid values include `'mathlist'` and `'span'` * * @return {string} * @function module:mathlive#latexToMarkup */ function toMarkup(text, mathstyle, format, macros) { mathstyle = mathstyle || 'displaystyle'; console.assert(/displaystyle|textstyle|scriptstyle|scriptscriptstyle/.test(mathstyle), "Invalid style:", mathstyle); // // 1. Tokenize the text // const tokens = Lexer.tokenize(text); // // 2. Parse each token in the formula // Turn the list of tokens in the formula into // a tree of high-level MathAtom, e.g. 'genfrac'. // const mathlist = ParserModule.parseTokens(tokens, 'math', null, macros); if (format === 'mathlist') return mathlist; // // 3. Transform the math atoms into elementary spans // for example from genfrac to vlist. // let spans = MathAtom.decompose({mathstyle: mathstyle}, mathlist); // // 4. Simplify by coalescing adjacent nodes // for example, from <span>1</span><span>2</span> // to <span>12</span> // spans = Span.coalesce(spans); if (format === 'span') return spans; // // 5. Wrap the expression with struts // const base = Span.makeSpan(spans, 'ML__base'); const topStrut = Span.makeSpan('', 'ML__strut') topStrut.setStyle('height', base.height, 'em'); const struts = [topStrut]; if (base.depth !== 0) { const bottomStrut = Span.makeSpan('', 'ML__strut--bottom'); bottomStrut.setStyle('height', base.height + base.depth, 'em'); bottomStrut.setStyle('vertical-align', -base.depth, 'em'); struts.push(bottomStrut); } struts.push(base); const wrapper = Span.makeSpan(struts, 'ML__mathlive'); // // 6. Generate markup // return wrapper.toMarkup(); } /** * @callback module:mathlive.mathfieldCallback * @param {Mathfield} * * @callback module:mathlive.mathfieldWithDirectionCallback * @param {Mathfield} * @param {number} direction * @return {boolean} False to suppress default behavior. */ /** * Convert a DOM element into an editable math field. * * @param {HTMLElement|string} element An HTML DOM element, for example as obtained * by `.getElementById()` or a string representing the ID of a DOM element. * * @param {Object<string, *>} [config] * * @param {number} [config.horizontalSpacingScale=1.0] - Scaling factor to be * applied to horizontal spacing between elements. * * @param {string} [config.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. * * @param {function} [config.substituteTextArea] - A function that returns a * focusable element that can be used to capture text input. This can be * useful when a `<textarea>` element would be undesirable. Note that by default * on mobile devices the TextArea is automatically replaced with a `<span>` to * prevent the device virtual keyboard from being displayed. * * @param {mathfieldCallback} [config.onFocus] - Invoked when the mathfield has * gained focus * * @param {mathfieldCallback} [config.onBlur] - Invoked when the mathfield has * lost focus * * @param {mathfieldCallback} [config.onKeystroke] - Invoked when a keystroke is * about to be processed. First argument is a string describing the keystroke, * the second is the keyboard event. Return false to stop handling of the event. * * @param {boolean} [config.overrideDefaultInlineShortcuts=false] - If true * the default inline shortcuts (e.g. 'p' + 'i' = 'π') are ignored. * * @param {Object.<string, string>} [config.inlineShortcuts] - A map of shortcuts → replacement * value. For example `{ 'pi': '\\pi'}`. If `overrideDefaultInlineShortcuts` is * false, these shortcuts are applied after any default ones, and can therefore * override them. * * @param {boolean} [config.smartFence=true] - If true, when an open fence is * entered via `typedText()` it will generate a contextually appropriate markup, * for example using `\left...\right` if applicable. If false, the literal * value of the character will be inserted instead. * * @param {string} [config.virtualKeyboardToggleGlyph] - If specified, the markup * to be used to display the virtual keyboard toggle glyph. * * @param {string} [config.virtualKeyboardMode=''] - If `'manual'`, pressing the * command bar toggle will display a virtual keyboard instead of the command bar. * If `'onfocus'`, the virtual keyboard will be displayed whenever the field is * focused. In that case, the command bar toggle is not displayed. * When this setting is not empty, `config.overrideDefaultCommands` and * `config.commands` are ignored. * * @param {string} [config.virtualKeyboards='all'] - 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. * * @param {string} [config.virtualKeyboardRomanLayout='qwerty'] - The * arrangement of the keys for the layers of the roman virtual keyboard. * One of `'qwerty'`, `'azerty'`, '`qwertz'`, '`dvorak`' or '`colemak`'. * * @param {Object} [config.customVirtualKeyboardLayers] - 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. * * @param {Object} [config.customVirtualKeyboards] - An object describing * additional keyboards. Each key in the object is an ID for a separate keyboard. * The key should have a value made up of an object with the following keys: * * tooltip: a string label describing the keyboard. * * label: a string, displayed in the keyboard switcher to identify this * keyboard * * layers: an array of strings, the ID of the layers used by this keyboard. * These layers should be defined using `customVirtualKeyboardLayers`. * * classes: a string, the classes to be added to the label for this keyboard * Possible values are 'tex' to use a TeX font to display the label. * * layer: optional, the ID of the layer to switch to when the label of this * keyboard is clicked on in the keyboard switcher. * * command: optional, a selector to perform when the label is clicked. * Either the `command` or `layer` key must be present. * * * @param {boolean} [config.virtualKeyboardTheme=''] - 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). * * @param {boolean} [config.keypressVibration='on'] When a key on the virtual * keyboard is pressed, produce a short haptic feedback. * * @param {boolean} [config.keypressSound=''] 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. * * @param {string} [config.plonkSound=''] Path to a 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. * * @param {string} [config.textToSpeechRules='mathlive'] 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. * Note that SRE is not included or loaded by MathLive and for this option to * work SRE should be loaded separately. * * @param {string} [config.textToSpeechMarkup=''] 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 (e.g. `[[ltr]]`) * * @param {*} [config.textToSpeechRulesOptions={}] A set of value/pair 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]{@link:https://github.com/zorkow/speech-rule-engine} * * @param {string} [config.speechEngine='local'] 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. See the 'speech' * example project for more details. * * @param {string} [config.speechEngineVoice=''] 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 * * @param {string} [config.speechEngineRate=''] Sets the speed of the selected * voice. One of `x-slow, slow, medium, fast,x-fast` or a value as a percentage. * For example `200%` to indicate a speaking rate twice the default rate. Range * is `20%` to `200%` * * @param {mathfieldWithDirectionCallback} [config.onMoveOutOf] - A handler * called when keyboard navigation would cause the insertion point to leave the * mathfield. * * By default, the insertion point will wrap around. * * @param {mathfieldWithDirectionCallback} [config.onTabOutOf] - A handler called when * pressing tab (or shift-tab) would cause the insertion point to leave the mathfield. * * By default, the insertion point jumps to the next point of interest. * * @param {mathfieldWithDirectionCallback} [config.onDeleteOutOf] - A handler called when * deleting an item would cause the insertion point to leave the mathfield. * * By default, nothing happens. @todo Not implemented yet. * * @param {mathfieldWithDirectionCallback} [config.onSelectOutOf] - A handler called when * the selection is extended so that it would cause the insertion point to * leave the mathfield. * * By default, nothing happens. @todo Not implemented yet. * * @param {mathfieldCallback} [config.onUpOutOf] - A handler called when * the up arrow key is pressed with no element to navigate to. * * By default, nothing happens. @todo Not implemented yet. * * @param {mathfieldCallback} [config.onDownOutOf] - A handler called when * the up down key is pressed with no element to navigate to. * * By default, nothing happens. @todo Not implemented yet. * * @param {mathfieldCallback} [config.onEnter] - A handler called when * the enter/return key is pressed and it is not otherwise handled. @todo * * @param {mathfieldCallback} [config.onContentWillChange] - A handler called * just before the content is about to be changed. * * @param {mathfieldCallback} [config.onContentDidChange] - A handler called * just after the content has been changed. * * @param {mathfieldCallback} [config.onSelectionWillChange] - A handler called * just before the selection is about to be changed. * * @param {mathfieldCallback} [config.onSelectionDidChange] - A handler called * just after the selection has been changed. * * @param {mathfieldCallback} [config.onUndoStateWillChange] - A handler called * before a change in the undo stack state. The single parameter is a string * indication what caused the state change: `undo`, `redo` or `snapshot`. * * @param {mathfieldCallback} [config.onUndoStateDidChange] - A handler called * after a change in the undo stack state. The single parameter is a string * indication what caused the state change: `undo`, `redo` or `snapshot`. * * @param {mathfieldCallback} [config.onVirtualKeyboardToggle] - A handler * called after the virtual keyboard visibility has changed. The first argument * is true if the virtual keyboard is visible, the second argument is a DOM * element containing the virtual keyboard, which can be used to determine its * size (and therefore the portion of the screen it obscures) * * @param {mathfieldCallback} [config.onReadAloudStatus] - A handler called * when the status of read aloud changes. The first argument is a string denoting * the status, one of `playing` sent when reading begins, `done` when reading * has been completed, `paused` when reading has been temporarily paused by the * user. * * @param {*} [config.handleSpeak] - A callback invoked to produce speech from * a string. * * @param {*} [config.handleReadAloud] - A callback invoked to produce speech * and highlight the relevant atoms in an equation. The input is SSML markup * with appropriate `<mark>` tags. * * @return {MathField} * * @function module:mathlive#makeMathField */ function makeMathField(element, config) { if (!MathField) { throw Error('The MathField module is not loaded.'); } config = config || {}; config.handleSpeak = config.handleSpeak || speak; config.handleReadAloud = config.handleReadAloud || readAloud; return new MathField.MathField(getElement(element), config); } /** * @return {string} * @function module:mathlive#latexToSpeakableText */ function toSpeakableText(atoms, options) { if (!MathAtom.toSpeakableText) { console.log('The SpokenText module is not loaded.'); return; } MathAtom.toSpeakableText(atoms, options); } /** * Convert a LaTeX string to a string of MathML markup. * * @param {string} latex A string of valid LaTeX. It does not have to start * with a mode token such as a `$$` or `\(`. * @param {object} options * @param {boolean} [options.generateID=false] - If true, add an `extid` attribute * to the MathML nodes with a value corresponding with the a matching atomID. * @return {string} * @function module:mathlive#latexToMathML */ function toMathML(latex, options) { if (!MathAtom.toMathML) { console.log('The MathML module is not loaded.'); return ''; } options = options || {macros:{}}; options.macros = options.macros || {}; Object.assign(options.macros, Definitions.MACROS); const mathlist = ParserModule.parseTokens(Lexer.tokenize(latex), 'math', null, options.macros); return MathAtom.toMathML(mathlist, options); } /** * Convert a LaTeX string to an Abstract Syntax Tree * * **See:** {@tutorial MASTON} * * @param {string} latex A string of valid LaTeX. It does not have to start * with a mode token such as a `$$` or `\(`. * * @return {Object} The Abstract Syntax Tree as a JavaScript object. * @function module:mathlive#latexToAST */ function latexToAST(latex, options) { if (!MathAtom.toAST) { console.log('The AST module is not loaded.'); return {}; } options = options || {macros:{}}; Object.assign(options.macros, Definitions.MACROS); const mathlist = ParserModule.parseTokens(Lexer.tokenize(latex), 'math', null, options.macros); return MathAtom.toAST(mathlist, options); } function removeHighlight(node) { node.classList.remove('highlight'); if (node.children) { Array.from(node.children).forEach(x => { removeHighlight(x); }); } } /** * Highlight the span corresponding to the specified atomID * This is used for TTS with synchronized highlighting (read aloud) * * @param {string} atomID * */ function highlightAtomID(node, atomID) { if (!atomID || node.dataset.atomId === atomID) { node.classList.add('highlight'); if (node.children && node.children.length > 0) { Array.from(node.children).forEach(x => { highlightAtomID(x); }); } } else { node.classList.remove('highlight'); if (node.children && node.children.length > 0) { Array.from(node.children).forEach(x => { highlightAtomID(x, atomID); }); } } } function speak(text, config) { if (!config && window && window.mathlive) { config = window.mathlive.config; } config = config || {}; if (!config.speechEngine || config.speechEngine === 'local') { // On ChromeOS: chrome.accessibilityFeatures.spokenFeedback // See also https://developer.chrome.com/apps/tts const utterance = new SpeechSynthesisUtterance(text); if (window) { window.speechSynthesis.speak(utterance); } else { console.log('Speak: ', text); } } else if (config.speechEngine === 'amazon') { if (!window || !window.AWS) { console.log('AWS SDK not loaded. See https://www.npmjs.com/package/aws-sdk'); } else { const polly = new window.AWS.Polly({apiVersion: '2016-06-10'}); const params = { OutputFormat: 'mp3',