MathJax not rendering after refresh page

In order to understand how MathJax works, I have developed a very basic and simple html file (called test.html) with some MathJax equations:

<html>

    <!-- Module for rendering Markdown content -->
    <script type="module" src="https://md-block.verou.me/md-block.js"></script>

    <!-- Module for rendering mathematical equations -->
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

    <body>
        <md-block>

            Let's solve a simple second-order homogeneous linear differential equation with constant coefficients. One common example is:

            \[
            y'' - 5y' + 6y = 0
            \]

            To solve this, we'll find the characteristic equation by assuming a solution of the form \( y = e^{rt} \), where \( r \) is a constant. The derivative terms \( y' \) and \( y'' \) become \( re^{rt} \) and \( r^2e^{rt} \) respectively, leading to the characteristic equation:

            \[
            r^2 - 5r + 6 = 0
            \]

            This quadratic can be factored as:

            \[
            (r - 2)(r - 3) = 0
            \]

            So, \( r_1 = 2 \) and \( r_2 = 3 \) are the roots. Therefore, the general solution of the differential equation is:

            \[
            y(t) = c_1e^{2t} + c_2e^{3t}
            \]

            Here, \( c_1 \) and \( c_2 \) are constants determined by initial conditions, which are not given in this context. Thus, we have the general form of the solution.

        </md-block>
    </body>
</html>

Now, if I open with Google Chrome the test.html file, the equations render perfectly, but when I refresh the page using the refresh button of Chrome, the euqations are shown in their row form. I have to wait around a couple of minutes to have the equations properly rendered in MathJax format.

Do you know what could be the reason and how should I edit this file in order to have a properly working code?

Solution

These two libraries are fighting against each other. In your example, if you really would include markdown code, like formatting some words as bold, such as __homogeneous__ instead of homogeneous, then you could sometimes even get a final rendering that still has the underscores instead of the bold font. They can destroy each other's effects.

Although you load the second script async, the first library has asynchronous code, so the second script could execute in between the asynchronous tasks of the first script.

There are several solutions we can imagine here.

For instance, the first script issues an md-render event for each markdown element that has been fully processed. You could listen for those until you have received all of them and only then load the mathjax library.

Secondly, the markdown library touches (and "fixes") the $, $, \[ and \] escapes, so if that happens before the mathjax library loads (which we will force), then it will still not perform the expected transformation. Luckily we can set the math delimiters to other character sequences. By default $$ can be used instead of \[ and \], but for inline expressions we will need to do a configuration. For instance, we could say that $$$ is the inline expression delimiter. The markdown library will not touch those. So this means you also need to adapt your HTML to use those delimiters instead.

Here is all that put together:

<!-- Module for rendering Markdown content: load it synchronously -->
<script type="module" src="https://md-block.verou.me/md-block.js"></script>
<!-- don't load mathjax yet -->

<!-- note the different delimiters in the block below: -->
<md-block>

    Let's solve a simple second-order __homogeneous__ linear differential equation with constant coefficients. One common example is:

    $$
    y'' - 5y' + 6y = 0
    $$

    To solve this, we'll find the characteristic equation by assuming a solution of the form $$$ y = e^{rt} $$$, where $$$ r $$$ is a constant. The derivative terms $$$ y' $$$ and $$$ y'' $$$ become $$$ re^{rt} $$$ and $$$ r^2e^{rt} $$$ respectively, leading to the characteristic equation:

    $$
    r^2 - 5r + 6 = 0
    $$

    This quadratic can be factored as:

    $$
    (r - 2)(r - 3) = 0
    $$

    So, $$$ r_1 = 2 $$$ and $$$ r_2 = 3 $$$ are the roots. Therefore, the general solution of the differential equation is:

    $$
    y(t) = c_1e^{2t} + c_2e^{3t}
    $$

    Here, $$$ c_1 $$$ and $$$ c_2 $$$ are constants determined by initial conditions, which are not given in this context. Thus, we have the general form of the solution.

</md-block>


<script>
// Add a listener for the md-render event:
document.addEventListener("md-render", function () {
    // Configure the mathjax inline delimiters before loading the lib 
    window.MathJax = {
      tex: {
        inlineMath: [['$$$', '$$$']],
      }
    };
    // Load the mathjax library dynamically
    const script = document.createElement('script');
    script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js');
    document.head.appendChild(script);   
});
</script>