Difference between revisions of "MathJax"

From ArchWiki
Jump to navigation Jump to search
(Created page with "ja:MathJax [url=https://www.mathjax.org]MathJax[/url] is a JavaScript display engine for mathematics that works in all browsers. It is able to parse TeX input in html file...")
 
(change category to Category:Science and Category:Web)
 
(5 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
[[Category:Science]]
 +
[[Category:Web]]
 
[[ja:MathJax]]
 
[[ja:MathJax]]
[url=https://www.mathjax.org]MathJax[/url] is a JavaScript display engine for mathematics that works in all browsers.
+
[https://www.mathjax.org MathJax] is a JavaScript display engine for mathematics that works in all browsers.
It is able to parse TeX input in html files to produce svg output, amongst other supported formats.
+
It is able to parse [[Wikipedia:TeX|TeX]] input in html files to produce svg output, amongst other supported formats. The higher-level [[Jupyter|Jupyter notebook]] depends on MathJax and other modules for plotting, running interactive code, etc.
 +
 
 +
MathJax can easily be embedded on any website to typeset your TeX.
 +
It is possible to quickly integrate MathJax with a distributed network service, see [https://www.mathjax.org/#docs here] for the currently available CDN.
 +
 
 +
This article assumes you want a hard copy of MathJax on your system.
  
 
== Installation and Configuration ==
 
== Installation and Configuration ==
Line 7: Line 14:
 
Install {{pkg|mathjax}} from the official repositories.
 
Install {{pkg|mathjax}} from the official repositories.
 
   
 
   
# pacman -S mathjax
 
 
 
=== Local Usage ===
 
=== Local Usage ===
  
Line 20: Line 25:
  
 
Don't forget to include a configuration query string to tell MathJax about your desired i/o formats.
 
Don't forget to include a configuration query string to tell MathJax about your desired i/o formats.
You can also configure MathJax inline, see [url=http://docs.mathjax.org/en/latest/config-files.html#common-configurations]here[/url] for more details.
+
 
 +
You can also configure MathJax inline, see [http://docs.mathjax.org/en/latest/config-files.html#common-configurations here] for more details and configuration options.
  
 
Your browser should now render the symbols at {{ic|file:///home/user/equations.html}}.
 
Your browser should now render the symbols at {{ic|file:///home/user/equations.html}}.
 +
 +
Note that the TeX delimiters MathJax uses by default are {{ic| \( ... \) }} for inline math and
 +
{{ic| \[ ... \] }}, {{ic| $$ ... $$}} for outline math.
  
 
=== Server Usage ===
 
=== Server Usage ===
Line 35: Line 44:
 
You can now have MathJax parse the TeX code in, say, {{ic|/srv/http/pages/equations.html}} by including in its head:
 
You can now have MathJax parse the TeX code in, say, {{ic|/srv/http/pages/equations.html}} by including in its head:
  
  <script src="../mathjax/MathJax.js"></script>
+
  <script src="../mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
 +
 
 +
== Troubleshooting ==
 +
 
 +
=== MathJax and Plotly ===
 +
 
 +
If you are using {{ic|plotly.js}} as well, loading MathJax before Plotly might fail to render TeX code. Loading Plotly ''before'' MathJax should work. For example:
 +
 
 +
<head>
 +
      <script src="path-to-plotly/plotly-latest.min.js"></script>
 +
      <script src="path-to-mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
 +
</head>
 +
 
 +
You may also try different MathJax output.
 +
 
 +
=== TeX raw code visible while page is loading ===
 +
 
 +
It can happen that MathJax takes some time to typeset and raw TeX code appears during the while, producing an unpleasant result.
 +
 
 +
You can fix this by setting {{ic|visibility: hidden}} in some element's {{ic|css}} properties, and catch the event MathJax emits after typesetting is done to show it:
 +
 
 +
MathJax.Hub.Queue( function () {
 +
    document.getElementById("myID").visibility = "visible";
 +
});

Latest revision as of 07:50, 20 October 2018

MathJax is a JavaScript display engine for mathematics that works in all browsers. It is able to parse TeX input in html files to produce svg output, amongst other supported formats. The higher-level Jupyter notebook depends on MathJax and other modules for plotting, running interactive code, etc.

MathJax can easily be embedded on any website to typeset your TeX. It is possible to quickly integrate MathJax with a distributed network service, see here for the currently available CDN.

This article assumes you want a hard copy of MathJax on your system.

Installation and Configuration

Install mathjax from the official repositories.

Local Usage

To have MathJax parse the TeX code in ~/equations.html and produce SVG output:

<head>
    ...
    <script ="/usr/share/mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
    ...
</head>

Don't forget to include a configuration query string to tell MathJax about your desired i/o formats.

You can also configure MathJax inline, see here for more details and configuration options.

Your browser should now render the symbols at file:///home/user/equations.html.

Note that the TeX delimiters MathJax uses by default are \( ... \) for inline math and \[ ... \] , $$ ... $$ for outline math.

Server Usage

In order to serve your clients with MathJax processed documents, you need your scripts to access its main file: /usr/share/mathjax/MathJax.js.

Let us assume the server's root directory is set to /srv/http/, creating symlinks will grant your scripts access to the installed package:

$ cp -rs /usr/share/mathjax /srv/http/mathjax

You can now have MathJax parse the TeX code in, say, /srv/http/pages/equations.html by including in its head:

<script src="../mathjax/MathJax.js?config=TeX-AMS_SVG"></script>

Troubleshooting

MathJax and Plotly

If you are using plotly.js as well, loading MathJax before Plotly might fail to render TeX code. Loading Plotly before MathJax should work. For example:

<head>
     <script src="path-to-plotly/plotly-latest.min.js"></script>
     <script src="path-to-mathjax/MathJax.js?config=TeX-AMS_SVG"></script>
</head>

You may also try different MathJax output.

TeX raw code visible while page is loading

It can happen that MathJax takes some time to typeset and raw TeX code appears during the while, producing an unpleasant result.

You can fix this by setting visibility: hidden in some element's css properties, and catch the event MathJax emits after typesetting is done to show it:

MathJax.Hub.Queue( function () { 
    document.getElementById("myID").visibility = "visible";
});