- MathJax是什么
- MathJax AsciiMath Support
- 入门指南
- MathJax Output Formats
- Loading MathJax Dynamically
- 安装和测试MathJax
- The MathJax Community
- Modifying Math on the Page
- 加载和配置MathJax
- What’s New in MathJax v2.0
- MathJax API
- Common Configurations
- What’s New in MathJax v1.1
- Describing HTML snippets
- Configuration Objects
- Migrating from MathJax v1.0 to v1.1
- CSS Style Objects
- Using MathJax in popular web platforms
- Converting to MathJax from jsMath
- Glossary
- MathJax TeX and LaTeX Support
- The MathJax Processing Model
- MathJax MathML Support
- The MathJax Startup Sequence
- Synchronizing your code with MathJax

# Modifying Math on the Page

If you are writing a dynamic web page where content containing

mathematics may appear after MathJax has already typeset the rest of

the page, then you will need to tell MathJax to look for mathematics

in the page again when that new content is produced. To do that, you

need to use the `MathJax.Hub.Typeset()` method. This will cause

the preprocessors (if any were loaded) to run over the page again, and

then MathJax will look for unprocessed mathematics on the page and

typeset it, leaving unchanged any math that has already been typeset.

You should not simply call this method directly, however. Because

MathJax operates asynchonously (see for details), you need to be sure that

your call to `MathJax.Hub.Typeset()` is synchronized with the

other actions that MathJax is taking. For example, it may already be

typesetting portions of the page, or it may be waiting for an output

jax to load, etc., and so you need to queue the typeset action to be

performed after MathJax has finished whatever else it may be doing.

That may be immediately, but it may not, and there is no way to tell.

To queue the typeset action, use the command

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

This will cause MathJax to typeset the page when it is next able to do

so. It guarantees that the typesetting will synchronize properly

with the loading of jax, extensions, fonts, stylesheets, and other

asynchronous activity, and is the only truly safe way to ask MathJax

to process additional material.

The `MathJax.Hub.Typeset()` command also accepts a parameter

that is a DOM element whose content is to be typeset. That could be

a paragraph, or a `<div>` element, or even a MathJax math

`<script>` tag. It could also be the DOM id of such an object, in

which case, MathJax will look up the DOM element for you. So

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathExample"]);

would typeset the mathematics contained in the element whose id is

`MathExample`. This is equivalent to

var math = document.getElementById("MathExample"); MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);

If no element or element id is provided, the whole document is

typeset.

Note that the `MathJax.Hub.Queue()` method will return

immediately, regardless of whether the typesetting has taken place or

not, so you can not assume that the mathematics is visible after you

make this call. That means that things like the size of the container

for the mathematics may not yet reflect the size of the typeset

mathematics. If you need to perform actions that depend on the

mathematics being typeset, you should push those actions onto the

`MathJax.Hub.queue` as well.

This can be quite subtle, so you have to think carefully about the

structure of your code that works with the typeset mathematics. Also,

the things you push onto the queue should be Callback objects that

perform the actions you want when they are called, not the results

of calling the functions that do what you want.

## Manipulating Individual Math Elements

If you are not changing a complete DOM structure, but simply want to

update the contents of a single mathematical equation, you do not need

to use `innerHTML` and `MathJax.Hub.Typeset()` to preprocess

and process an element’s new content. Instead, you can ask MathJax to

find the element jax for the math element on the page, and use its

methods to modify and update the mathematics that it displays.

For example, suppose you have the following HTML in your document

<div id="MathDiv"> The answer you provided is: \({}\). </div>

and MathJax has already preprocessed and typeset the mathematics

within the div. A student has typed something elsewhere on the page,

and you want to typeset their answer in the location of the

mathematics that is already there. You could replace the entire

contents of the MathDiv element and call

`MathJax.Hub.Typeset()` as described above, but there is a more

efficient approach, which is to ask MathJax for the element jax for

the mathematics, and call its method for replacing the formula shown

by that element. For example:

var math = MathJax.Hub.getAllJax("MathDiv")[0]; MathJax.Hub.Queue(["Text",math,"x+1"]);

This looks up the list of math elements in the MathDiv element

(there is only one) and takes the first one (element 0) and stores it

in `math`. This is an element jax object (see the Element

Jax specification for details), which has a

method that can be used to set the input text of the

math element, and retypeset it.

Again, since the typesetting should be synchronized with other actions

of MathJax, the call should be pushed onto the MathJax processing

queue using `MathJax.Hub.Queue()`, as shown above, rather than

called directly. The example above performs the equivalent of

`math.Text("x+1")` as soon as MathJax is able to do so. Any

additional actions that rely on the expression `x+1` actually

showing on screen should also be pushed onto the queue so that they

will not occur before the math is typeset.

The actions you can perform on an element jax include:

Text(newmath)to set the math text of the element to newmath and typeset.

Rerender()to remove the output and reproduce it again (for example, if

CSS has changed that would alter the spacing of the

mathematics). Note that the internal representation isn’t

regenerated; only the output is.

Reprocess()to remove the output and then retranslate the input into the

internal MathML and rerender the output.

Remove()to remove the output for this math element (but not

the original<script>tag).

needsUpdate()to find out if the mathematics has changed so that its output

needs to be updated.

SourceElement()to obtain a reference to the original

<script>object that is associated with this element jax.

Note that once you have located an element jax, you can keep using it

and don’t have to look it up again. So for the example above, if the

student is going to be able to type several different answers that you

will want to typeset, you can look up the element jax once at the

beginning after MathJax has processed the page the first time, and

then use that result each time you adjust the mathematics to be

displayed.

To get the element jax the first time, you need to be sure that you

ask MathJax for it **after** MathJax has processed the page the first

time. This is another situation where you want to use the MathJax

queue. If your startup code performs the commands

var studentDisplay = null; MathJax.Hub.Queue(function () { studentDisplay = MathJax.Hub.getAllJax("MathDiv")[0]; });

then you can use

MathJax.Hub.Queue(["Text",studentDisplay,studentAnswer])

to change the student’s answer to be the typeset version of whatever

is in the `studentAnswer` variable.

Here is a complete example that illustrates this approach. Note,

however, that Internet Explorer does not fire the `onchange` event

when you press RETURN, so this example does not work as expected in

IE. A more full-featured version that addresses this problem is

available in test/sample-dynamic.html.

<html> <head> <title>MathJax Dynamic Math Test Page</title> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [["$","$"],["\\(","\\)"]] } }); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"> </script> </head> <body> <script> // // Use a closure to hide the local variables from the // global namespace // (function () { var QUEUE = MathJax.Hub.queue; // shorthand for the queue var math = null; // the element jax for the math output. // // Get the element jax when MathJax has produced it. // QUEUE.Push(function () { math = MathJax.Hub.getAllJax("MathOutput")[0]; }); // // The onchange event handler that typesets the // math entered by the user // window.UpdateMath = function (TeX) { QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]); } })(); </script> Type some TeX code: <input id="MathInput" size="50" onchange="UpdateMath(this.value)" /> <p> <div id="MathOutput"> You typed: ${}$ </div> </body> </html>

There are a number of additional example pages at test/examples.html that

illustrate how to call MathJax dynamically or perform other actions

with MathJax.

下一篇：加载和配置MathJax

## 发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。