This modules exports the MathLive entry points.
// To invoke the functions in this module, import the MathLive module.
import MathLive from 'dist/mathlive.mjs';
const markup = MathLive.latexToMarkup('e^{i\\pi}+1=0');
Methods
getOriginalContent(element: string | Element | MathField, options?: object): string
After calling renderMathInElement
or makeMathField
the original content
can be retrived by calling this function.
Given the following markup:
<span id='equation'>$$f(x)=sin(x)$$</span>
The following code:
MathLive.renderMathInElement('equation');
console.log(MathLive.getOriginalContent('equation'));
will output:
$$f(x)=sin(x)$$
options
:
object
= {}
options.namespace
:
string
= ""
The namespace used for the data-
attributes.
If you used a namespace with renderMathInElement
, you must
use the same namespace here.
the original content of the element.
latexToAST(latex: string): object
Convert a LaTeX string to an Abstract Syntax Tree
See: MASTON
latex
:
string
A string of valid LaTeX. It does not have to start
with a mode token such as a $$
or \(
.
The Abstract Syntax Tree as a JavaScript object.
latexToMarkup(text: string, mathstyle: string, format?: string): string
Convert a LaTeX string to a string of HTML markup.
text
:
string
A string of valid LaTeX. It does not have to start
with a mode token such as $$
or \(
.
mathstyle
:
string
If 'displaystyle'
the "display" mode of TeX
is used to typeset the formula, which is most appropriate for formulas that are
displayed in a standalone block. If 'textstyle'
is used, the "text" mode
of TeX is used, which is most appropriate when displaying math "inline"
with other text (on the same line).
format
:
string
= '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'
latexToMathML(latex: string, options: object): string
Convert a LaTeX string to a string of MathML markup.
latex
:
string
A string of valid LaTeX. It does not have to start
with a mode token such as a $$
or \(
.
options
:
object
options.generateID
:
boolean
= false
If true, add an extid
attribute
to the MathML nodes with a value matching the atomID
.
latexToSpeakableText(latex: string, options: [string]:any): string
Convert a LaTeX string to a textual representation ready to be spoken
latex
:
string
A string of valid LaTeX. It does not have to start
with a mode token such as a $$
or \(
.
options
:
[string]:any
-
options.textToSpeechRules
:
string
= '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.
options.textToSpeechMarkup
:
string
= ''
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]]
)
options.textToSpeechRulesOptions
:
[string]:any
= {}
A set of key/value pairs that can be used to configure the speech rule engine.
Which options are available depends on the speech rule engine in use. There are no options available with MathLive's built-in engine. The options for the SRE engine are documented [here]{@link:https://github.com/zorkow/speech-rule-engine}
The spoken representation of the input LaTeX.
console.log(MathLive.latexToSpeakableText('\\frac{1}{2}'));
// ➡︎'half'
makeMathField(element: Element | string, config?: [string]:any): MathField
Convert a DOM element into an editable math field.
After the DOM element has been created, the value element.mathfield
will
return a reference to the mathfield object. This value is also returned
by makeMathField
element
:
Element
|
string
A DOM element, for example as obtained
by document.getElementById()
, or the ID of a DOM element as a string.
Given the HTML markup:
<span id='equation'>$f(x)=sin(x)$</span>
The following code will turn the span into an editable mathfield.
import MathLive from 'dist/mathlive.mjs';
MathLive.makeMathField('equation');
pauseReadAloud()
If a Read Aloud operation is in progress, stop it.
See speakAllWithSynchronizedHighlighting
playReadAloud(token: string, count?: number)
If a Read Aloud operation is in progress, read from a specified token
See speakAllWithSynchronizedHighlighting
token
:
string
count
:
number
readAloud(element: DOMElement, text: string, config: object)private
"Read Aloud" is an asynchronous operation that reads the reading with synchronized highlighting
element
:
DOMElement
The DOM element to highlight
text
:
string
The text to speak
config
:
object
readAloudStatus(): string
Return the status of a Read Aloud operation (reading with synchronized highlighting).
Possible values include:
ready
playing
paused
unavailable
See speakAllWithSynchronizedHighlighting
renderMathInElement(element: Element | string, options?: object, renderToMarkup?: function, renderToMathML?: function, renderToSpeakableText?: function)
Transform all the children of element
, recursively, that contain LaTeX code
into typeset math.
element
:
Element
|
string
An HTML DOM element, or a string containing the ID of an element.
options
:
object
= {}
options.namespace
:
string
= ''
Namespace that is added to data-
attributes to avoid collisions with other libraries.
It is empty by default.
The namespace should be a string of lowercase letters.
options.macros
:
object[]
= {}
Custom LaTeX macros
options.skipTags
:
string[]
= ['noscript', 'style', 'textarea', 'pre', 'code', 'annotation', 'annotation-xml']
an array of tag names whose content will
not be scanned for delimiters (unless their class matches the processClass
pattern below.
options.ignoreClass
:
string
= 'tex2jax_ignore'
a string used as a regular expression of class names of elements whose content will not be scanned for delimiters
options.processClass
:
string
= 'tex2jax_process'
a string used as a regular expression of class names of elements whose content will be scanned for delimiters, even if their tag name or parent class name would have prevented them from doing so.
options.processScriptType
:
string
= "math/tex"
<script>
tags of the
indicated type will be processed while others will be ignored.
options.renderAccessibleContent
:
string
= 'mathml'
The format(s) in which to render the math for screen readers:
'mathml'
MathML'speakable-text'
Spoken representation
You can pass an empty string to turn off the rendering of accessible content.
You can pass multiple values separated by spaces, e.g 'mathml speakable-text'
options.preserveOriginalContent
:
boolean
= true
if true, store the
original textual content of the element in a data-original-content
attribute. This value can be accessed for example to restore the element to
its original value:
elem.innerHTML = elem.dataset.originalContent;
options.readAloud
:
boolean
= false
if true, generate markup that can
be read aloud later using speakAllWithSynchronizedHighlighting
options.TeX.processEnvironments
:
boolean
= true
if false, math expression
that start with \begin{
will not automatically be rendered.
options.TeX.delimiters.inline
:
Array.<Array.<string>>
= [['\\(','\\)']]
arrays of delimiter pairs that will trigger a render of the content in 'textstyle'
options.TeX.delimiters.display
:
Array.<Array.<string>>
= [['$$', '$$'], ['\\[', '\\]']]
arrays of delimiter pairs that will trigger a render of the content in 'displaystyle'.
renderToMarkup
:
function
a function that will convert any LaTeX found to HTML markup. This is only useful to override the default MathLive renderer
renderToMathML
:
function
a function that will convert any LaTeX found to MathML markup.
renderToSpeakableText
:
function
a function that will convert any LaTeX found to speakable text markup.
resumeReadAloud()
If a Read Aloud operation is paused, resume it
See speakAllWithSynchronizedHighlighting
revertToOriginalContent(element: string | Element | MathField, options?: [string]:any)
element
:
string
|
Element
|
MathField
options
:
[string]:any
= {}
options.namespace
:
string
The namespace used for the data-
attributes. If you used a namespace with renderMathInElement
, you must
use the same namespace here.
highlightAtomID(atomID: string)inner
Highlight the span corresponding to the specified atomID This is used for TTS with synchronized highlighting (read aloud)
atomID
:
string
renderMathInDocument(options?: object)inner
Transform all the elements in the document body that contain LaTeX code into typeset math.
Note: This is a very expensive call, as it needs to parse the entire
DOM tree to determine which elements need to be processed. In most cases
this should only be called once per document, once the DOM has been loaded.
To render a specific element, use renderMathInElement()
import MathLive from 'dist/mathlive.mjs';
document.addEventListener("load", () => {
MathLive.renderMathInDocument();
});