Search code examples
javascripthtmlmathjax

Is it possible to call MathJax library directly from a folder in my HTML page without internet or third-party installations?


I want to use MathJax on my app's html ui component which does not support accessing third-party JavaScript libraries by way of a CDN.

I want download the entire code of MathJax, which is available here as .zip file (https://github.com/mathjax/MathJax-src/releases/tag/3.2.2), and then extract it inside my app directory.

I don't want to use npm to install MathJAx because the app will be distributed to my community so the users are not forced to install MathJax on their machines.

That is, I want my app to render LaTeX equations without internet and independent of any third-party installations. If there is a way to call MathJax library directly from the folder available above in the zip file it will be great.

I tried to insert the following basic HTML page as a hope to show user-defined equations supplied by my app, but I failed :(

<!DOCTYPE html>
<html>
<head>
  <title>MathJax Example</title>
  <script src="MathJax-src-3.2.2\components\src\tex-chtml/tex-chtml.js" id="MathJax-script" async></script>
</head>
<body>
  <h1>Equation:</h1>
  <div id="equation">
    $$ y = \frac{{\sin(x^2)}}{{\cos(2x)}} $$
  </div>
  <script>
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"equation"]);
  </script>
</body>
</html>

Any answer or comment will be very helpful to me .. Thank you

I'm trying to make MathJax library functioning in my html page without internet or third-part installation


Solution

  • There are several issues in your example page. First, the script at the bottom of the page uses the v2 API, which changed in v3 (it was also unnecessary in v2, but it will throw an error in v3 since MathJax.Hub is not part of v3).

    Next, you can't load the MathJax source files into a browser, at least not without something like System.js to handle the import and export statements in those files. (Version 4 will move to ES modules, so you will be able to use <script type="module"> to load them, with the proper import map, but even then I would only recommend doing that if you are editing the MathJax code, and would not recommend doing so in a production environment.

    Instead, you should load one of the webpacked files from the es5 directory. For this, you don't need to full installation from MathJax-src, but instead can use the slimmer one from https://github.com/mathjax/MathJax that includes everything is available from the CDNs that serve MathJax.

    See the MathJax documentation about hosting your own local copy of MathJax for more details.