javascriptmathjax

Why can't host my own copy of MathJax locally?

With cdn service to render latex in html.

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
   <script type="text/javascript" async
     src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
   </script>
   <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
     tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
   });
   </script>
   </head>
   <body>
   First of all, we can "relax" the $\forall$-Introduction rule : $A \to B \vdash A \to \forall x B$, provided that $x$ is not *free* in $A$.
   </body>
   </html>

All latex shows fine in html. enter image description here

I want to deploy the mathjax service locally.

Download the MathJax.js directly ,MathJax.js can open with the link: 127.0.0.1/wp/MathJax.js,set the src as below:

<script type="text/javascript" async
     src="http://127.0.0.1/wp/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

latex can't be shown. enter image description here

Maybe some useful files haven't download,so i git all mathjax's file as the mathjax official document(mathjax official document) denote,and copy all of them to apache's document directory.

git clone https://github.com/mathjax/MathJax.git mathjax

tex-chtml can open in the url http://127.0.0.1/mathjax/es5/tex-chtml.js,write the html:

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
   <script type="text/javascript" async
     src="http://127.0.0.1/mathjax/es5/tex-chtml.js?config=TeX-MML-AM_CHTML">
   </script>
   <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
     tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
   });
   </script>
   </head>
   <body>
   First of all, we can "relax" the $\forall$-Introduction rule : $A \to B \vdash A \to \forall x B$, provided that $x$ is not *free* in $A$.
   </body>
   </html>

Restart my apache,no error info on firefox's debug,but the line haven't been rendered by mathjax.

enter image description here

How to fix it?

Solution

  • What I can see here is the mismatch of versions and, as a result, the solution for initializing the lib. You were trying to initialize the library using the latest version, which was the old way. I repeated your HTML and indeed haven't had any errors. So I opened official documentation on the part "Get started" and it says there, instead of your

    <script type="text/x-mathjax-config">
   MathJax.Hub.Config({
     tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
   });
</script>

    you have to predefined constant before loading the library

    <script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };
</script>

    So your HTML might look like

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript">
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    };
    </script>
<script type="text/javascript"
  src="http://127.0.0.1/mathjax/es5/tex-chtml.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
First of all, we can "relax" the $\forall$-Introduction rule : $A \to B \vdash A \to \forall x B$, provided that $x$ is not *free* in $A$.
</body>
</html>