itutor-mathlive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"><title>Usage Guide - 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">Usage Guide</h1> <section> <header> <ul> <li><a href="tutorial-EXAMPLES.html">Examples</a></li> <li><a href="tutorial-COMMANDS_REFERENCE.html">Commands Reference</a></li> </ul> </header> <article> <p>This guide describes how to use the MathLive Javascript library with your own web content. </p> <p>To contribute to the MathLive project, see the <a href="tutorial-CONTRIBUTOR_GUIDE.html">Contributor Guide</a>.</p> <h2 id="getting-started">Getting Started</h2> <p>Install MathLive from gitHub or from NPM.</p> <h3 id="from-github">From GitHub</h3> <p>You can find MathLive at <a href="https://github.com/arnog/mathlive/">https://github.com/arnog/mathlive/</a></p> <p>The <code>dist/</code> directory contains all you need to use MathLive. MathLive has no dependency on other libraries (not even jQuery!) and you do not need to download or install anything else.</p> <p>The <code>dist/</code> directory contains the following:</p> <ul> <li><code>mathlive.js</code> The MathLive Javascript library. It is an optimized and minified Javascript file which exports the <a href="module-mathlive.html"><code>MathLive</code></a> module which gives access to the MathLive API.</li> <li><code>mathlive-core.css</code> The minimal amount of CSS to display math with MathLive.</li> <li><code>mathlive.css</code> The rest of the CSS you need to display math. You can load this file lazily to improve your page load time.</li> <li><code>fonts/</code> A directory of fonts used by MathLive. Credit for those fonts goes to the KaTeX project.</li> </ul> <h3 id="from-npm">From NPM</h3> <pre class="prettyprint source lang-bash"><code>$ npm install -g mathlive</code></pre><h3 id="using-mathlive-in-your-project">Using MathLive in your project</h3> <p>Include the following in your web page. Adjust the <code>src</code> and <code>href</code> arguments to account for your directory structure.</p> <pre class="prettyprint source lang-html"><code><!doctype html><html lang="en-US"> <head> ... <link rel="stylesheet" href="mathlive.core.css"> <link rel="stylesheet" href="mathlive.css"> </head> <body> ... <script src="mathlive.js"></script> </body> </html></code></pre><h2 id="rendering-math-automatically">Rendering Math Automatically</h2> <p>Call <a href="module-mathlive.html#renderMathInDocument"><code>MathLive.renderMathInDocument()</code></a> at the end of your document, or in a <code>onload</code> handler to render math contained in the document.</p> <pre class="prettyprint source lang-html"><code> ... <script src="mathlive.js"></script> <script> MathLive.renderMathInDocument(); </script> </body> </html></code></pre><p>By default, any LaTeX code that is enclosed with the following delimiters will be rendered as math:</p> <ul> <li><code>$$</code>...<code>$$</code></li> <li><code>\[</code>...<code>\]</code></li> <li><code>$</code>...<code>$</code></li> </ul> <pre class="prettyprint source lang-html"><code><h1>Taxicab Number</h1> <p>The second taxicab number is $$1729 = 10^3 + 9^3 = 12^3 + 1^3$$</p></code></pre><p>You can also wrap more complex expressions in a <code><script></code> tag with a type of <code>math/tex</code>. This is the recommended approach for stand-alone formulas. One of the benefits of this approach is that the browser will not attempt to display the content of the <code><script></code> tag before it is typeset, avoiding an unsightly flash of LaTeX code on screen. If the type is <code>"math/tex; mode=text"</code> the inline text style will be used, otherwise if the type is <code>"math/tex; mode=display"</code>, the display style will be used. If no mode is provided, the display style is used.</p> <pre class="prettyprint source lang-html"><code><h1>Quadratic roots</h1> <script type="math/tex"> ax^2+bx+c = a \left( x - \frac{-b + \sqrt {b^2-4ac}}{2a} \right) \left( x - \frac{-b - \sqrt {b^2-4ac}}{2a} \right) </script></code></pre><p>Elements with the following tags will be ignored for conversion: <code>noscript</code>, <code>style</code>, <code>textarea</code>, <code>pre</code>, <code>code</code>, <code>annotation</code> and <code>annotation-xml</code>.</p> <p>If you dynamically generate content, call <a href="module-mathlive.html#renderMathInElement"><code>MathLive.renderMathInElement(element)</code></a> to render your element after the page has been loaded. This is a recursive call that will be applied to <code>element</code> and all its children.</p> <p>It is possible to call <code>MathLive.renderMathInElement()</code> and <code>MathLive.renderMathInDocument</code> on elements and documents that have already been rendered, in which case they will be rendered again. This is useful if something in the environment changes that could require the layout to be updated.</p> <p>The <a href="module-mathlive.html#renderMathInElement"><code>MathLive.renderMathInElement()</code></a> and <a href="module-mathlive.html#renderMathInDocument"><code>MathLive.renderMathInDocument()</code></a> functions take an optional <code>options</code> object which can be used to customize their behavior:</p> <ul> <li><code>skipTags</code>: an array of tag names whose content will not be scanned for delimiters</li> <li><code>processScriptType</code>: <code><script></code> tags of the indicated type will be processed while others will be ignored. Default: "math/tex".</li> <li><code>ignoreClass</code>: a string used as a regular expression of class names of elements whose content will not be scanned for delimiters (<code>'tex2jax_ignore'</code> by default)</li> <li><code>processClass</code>: a string used as a regular expression of class names of elements whose content <strong>will</strong> be scanned for delimiters, even if their tag name or parent class name would have prevented them from doing so. (<code>'tex2jax_process'</code> by default)</li> <li><code>TeX.processEnvironments</code>: if false, math expression that start with <code>\begin{</code> will not automatically be rendered. (true by default)</li> <li><code>TeX.delimiters.inline</code> and <code>TeX.delimiters.display</code> arrays of delimiters that will trigger a render of the content in 'textstyle' or 'displaystyle' style, respectively.</li> </ul> <pre class="prettyprint source lang-javascript"><code> MathLive.renderMathInElement( document.getElementById('formulas'), { // Elements with a class of "instruction" or "source will be skipped ignoreClass: 'instruction|source', TeX : { delimiters: { // Allow math formulas surround by $...$ or $...$ // to be rendered as textstyle content. inline: [['$', '$'], ['\$', '\$']] } } } );</code></pre><h2 id="using-the-math-editor-with-javascript">Using the Math Editor with Javascript</h2> <p>To transform an existing HTML element into a math field, call <a href="module-mathlive.html#makeMathField"><code>MathLive.makeMathField(element, options)</code></a>. Think of this original element as a placeholder. Typically, a <code><div></code> would be appropriate. If the element contains some LaTeX text, it will be used as the initial value of the math field.</p> <p>For example:</p> <pre class="prettyprint source lang-html"><code><!DOCTYPE html><html lang="en-US"> <head> <meta charset="utf-8"> <title>MathLive Sample</title> <link rel="stylesheet" href="mathlive.core.css"> <link rel="stylesheet" href="mathlive.css"> <script src="mathlive.js"></script> </head> <body> <div id='mathfield' style='border: 1px solid #999;padding:5px;'> f(x)= </div> <script> const mathfield = MathLive.makeMathField(document.getElementById('mathfield')); </script> </body> </html></code></pre><p>You can control the math field using the public member functions of <code>MathField</code>, that is, functions that do not contain an <code>_</code> at the beginning or end of their name. Here's a short list for some common operations:</p> <ul> <li><code>el()</code> the DOM element associated with this math field</li> <li><code>text(format)</code> return a textual representation of the content of the math field, <code>format</code> can be either <code>"latex"</code> (default), <code>"spoken"</code> or <code>"mathML"</code>.</li> <li><code>.insert(content, options)</code> insert the specified content at the current insertion point. With <code>options</code> it is possible to specify the insertion mode, as well as what will be selected after the insertion. If the content contains a <code>#?</code> a placeholder will be indicated in its stead. The <code>#0</code> sequence will be replaced by the item currently selected (or a placeholder if nothing is selected)</li> <li><code>config()</code> customize how the math field behaves, as well as provide notification handlers, for example when the selection changes, or when navigation exists the math field.</li> <li><code>select()</code> select all the items in the math field</li> <li><code>clearSelection()</code> deletes the selection</li> <li><code>perform()</code> executes a command such as moving the insertion point. Typically invoked in response to a user action, such as pressing a keyboard shortcut or pushing a button. The command will be undoable. See the list of available commands in the <strong>Selectors</strong> section below.</li> </ul> <h2 id="selectors">Selectors</h2> <p>User initiated commands that control the math field can be dispatched using the <a href="MathField.html#perform"><code>perform()</code></a> commands. Commands are identified by a string called the <strong>selector</strong>. Most commands take no parameters. When a command does have a parameter, an array made up of the selector and the commands arguments can be passed to <a href="MathField.html#perform"><code>perform()</code></a>. For example:</p> <pre class="prettyprint source lang-javascript"><code> mf.perform(['insert', '(#0)']);</code></pre><p>will insert an open and close parenthesis around the selection (the <code>#0</code> sequence is replaced with the current selection).</p> <h3 id="editing">Editing</h3> <ul> <li><code>insert</code>. This selector takes two arguments. The first one is required and is the content to be inserted, as a string. The second one is an optional set of key value pairs:<ul> <li><code>insertionMode</code>: one of <code>"replaceSelection"</code>, <code>"replaceAll"</code>, <code>"insertBefore"</code> or <code>"insertAfter"</code>.</li> <li><code>selectionMode</code>: one of <code>"placeholder"</code> (the selection will be the first available placeholder in the item that has been inserted), <code>"after"</code> (the selection will be an insertion point after the item that has been inserted), <code>"before"</code> (the selection will be an insertion point before the item that has been inserted) or <code>"item"</code> (the item that was inserted will be selected).</li> </ul> </li> <li><code>delete</code> synonym for <code>deleteNextChar</code></li> <li><code>deleteNextChar</code>, <code>deletePreviousChar</code></li> <li><code>deleteNextWord</code>, <code>deletePreviousWord</code></li> <li><code>deleteToGroupStart</code>, <code>deleteToGroupEnd</code></li> <li><code>deleteToMathFieldEnd</code></li> <li><code>transpose</code></li> </ul> <h3 id="edit-menu">Edit Menu</h3> <ul> <li><code>undo</code></li> <li><code>redo</code></li> <li><code>cutToClipboard</code></li> <li><code>copyToClipboard</code></li> <li><code>pasteFromClipboard</code></li> </ul> <h3 id="user-interface">User Interface</h3> <ul> <li><code>enterCommandMode</code></li> <li><code>complete</code> exit command mode and insert result</li> <li><code>nextSuggestion</code> and <code>previousSuggestion</code> when the popover panel is selected, display the next/previous suggestion</li> <li><code>toggleKeystrokeCaption</code> show/hide the keystroke caption panel. This panel displays the keys being typed, including the shortcuts. Great for demos!</li> <li><code>toggleVirtualKeyboard</code> show/hide the virtual keyboard</li> </ul> <h3 id="scrolling">Scrolling</h3> <ul> <li><code>scrollToStart</code></li> <li><code>scrollToEnd</code></li> <li><code>scrollIntoView</code></li> </ul> <h3 id="navigating">Navigating</h3> <ul> <li><code>moveToNextChar</code>, <code>moveToPreviousChar</code></li> <li><code>moveToNextPlaceholder</code>, <code>moveToPreviousPlaceholder</code></li> <li><code>moveToNextWord</code>, <code>moveToPreviousWord</code></li> <li><code>moveToGroupStart</code>, <code>moveToGroupEnd</code></li> <li><code>moveToMathFieldStart</code>, <code>moveToMathFieldEnd</code></li> <li><code>moveUp</code>, <code>moveDown</code></li> <li><code>moveToSuperscript</code>, <code>moveToSubscript</code></li> <li><code>moveToOpposite</code></li> <li><code>moveBeforeParent</code>, <code>moveAfterParent</code></li> </ul> <h3 id="extending-the-selection">Extending the Selection</h3> <ul> <li><code>selectGroup</code></li> <li><code>selectAll</code></li> <li><code>extendToNextChar</code>, <code>extendToPreviousChar</code></li> <li><code>extendToNextWord</code>, <code>extendToPreviousWord</code></li> <li><code>extendUp</code>, <code>extendDown</code></li> <li><code>extendToNextBoundary</code>, <code>extendToPreviousBoundary</code></li> <li><code>extendToGroupStart</code>, <code>extendToGroupEnd</code></li> <li><code>extendToMathFieldStart</code>, <code>extendToMathFieldEnd</code></li> </ul> <h3 id="arrays">Arrays</h3> <ul> <li><code>addRowAfter</code>, <code>addRowBefore</code></li> <li><code>addColumnAfter</code>, <code>addColumnBefore</code></li> </ul> <h3 id="speech">Speech</h3> <ul> <li><code>speakAll</code></li> <li><code>speakSelection</code></li> <li><code>speakParent</code></li> <li><code>speakGroup</code></li> <li><code>speakLeftSibling</code>, <code>speakRightSibling</code></li> </ul> <h2 id="virtual-keyboards">Virtual Keyboards</h2> <p>Entry of expressions can be accomplished using a standard keyboard. In addition to numerous keyboard shortcuts, the 'command mode', which can be entered by pressing the <code>\</code> key, will allow the entry of less common symbols.</p> <p>However, on mobile devices in particular, the virtual keyboar of the operating system tends to interfere with the text entry, and is in generally poorly suited to the specialized task of entering math. For this reason, MathLive supports custom virtual keyboards that are displayed on screen and simulate specialized keyboards. Those keyboards are necessary on mobile devices, but they can also be used on desktop systems.</p> <p>By default on desktop devices the virtual keyboard will be displayed only when the user selects the keyboard button, displayed on the right of the formula. On mobile devices, the virtual keyboard will always be used, and the keyboard button is therefore not displayed.</p> <p>Each keyboard can be made up of one or more <em>keyboard layers</em> which is a specific configuration of keys. For example, a regular hardware keyboard has a default layer, where the key produce lower case characters when you press them, along with a 'shift' layer that produces upper case characters, and a 'alt' or 'option' layer that provides additional symbols.</p> <p>The virtual keyboards can be customized using the following keys in the <code>config</code> parameter of <code>makeMathField</code>.</p> <ul> <li><p><code>virtualKeyboardMode</code> If no value is specified, the default value is <code>manual</code> on desktop and <code>auto</code> on mobile.</p> <ul> <li>If <code>'manual'</code>, pressing the keyboard toggle will display a virtual keyboard </li> <li>If <code>'onfocus'</code>, the virtual keyboard will be displayed whenever the field is focused. In that case, the command bar toggle is not displayed. </li> </ul> <ul> <li><code>virtualKeyboards</code> - If <code>'all'</code>, all the virtual keyboards will be made available. Otherwise, this should be a space separated list of the keyboards that should be made available. The supported keyboards are:<ul> <li><code>'numeric'</code></li> <li><code>'roman'</code></li> <li><code>'greek'</code></li> <li><code>'functions'</code></li> <li><code>'command'</code></li> </ul> </li> </ul> <p>The keyboards will be displayed in the order indicated.</p> <ul> <li><code>virtualKeyboardTheme</code> - The visual theme of the virtual keyboard. If empty, the theme will switch automatically based on the device it's running on. The two supported themes are <code>material</code> and <code>apple</code>.</li> </ul> </li> </ul> </article> </section> </main> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="scripts/namis.search.jquery.js"></script> <script> function readCookie(a) { var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)'); return b ? b.pop() : ''; } function writeCookie(a, v) { var date = new Date(); date.setTime(date.getTime()+(30*24*60*60*1000)); document.cookie = a + "=" + v + "; expires=" + date.toUTCString() + "; path=/"; } var cookie = readCookie('symbol-access'); if (cookie === 'no-private') { document.documentElement.classList.add('no-private'); } document.getElementById('toggle-private').checked = !document.documentElement.classList.contains('no-private'); prettyPrint(); (function($){ $('#nav').search(['className', 'methodName']); })(jQuery); </script> <script src="scripts/linenumber.js"></script> </body> </html>