Skip to content

Using different mathjax renderers on one page

Davide P. Cervone edited this page Dec 27, 2013 · 2 revisions

One approach that might work for you is to put the math in two different containers with ID's that you can refer to, and then process the first using one renderer, switch renderers, and then process the other. You have to either suppress the initial typesetting (which would do the whole page) or set the "elements" configuration option to be the one that uses the default renderer (so that only one of the containers is processed initially.

Here is an example that does the former:

<!DOCTYPE html>
<html>
<head>
<title>Two Renderers in One Document</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  skipStartupTypeset:true
});
MathJax.Hub.Queue(
  ["Typeset",MathJax.Hub,"HTMLCSS-output"],
  ["setRenderer",MathJax.Hub,"SVG"],
  ["Typeset",MathJax.Hub,"SVG-output"]
);
</script>
<script src="../MathJax/unpacked/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<p id="HTMLCSS-output">
This is HTML-CSS math: \​[x+1\over x-1\​]
</p>
<p id="SVG-output">
This is SVG math: \​[x+1\over x-1\​]
</p>
</body>
</html>
Clone this wiki locally