The MathJax system is currently unable to process LaTeX environments

Question

The MathJax system is currently unable to process LaTeX environments

Currently, I am in the process of creating a blog post on Blogspot. Here is the MathJax configuration that I have integrated into the theme's HTML file:

<script defer='defer' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js' type='text/javascript'/>
<script>
window.MathJax = {
  tex: {
    loader: {load: [&#39;[tex]/ams&#39;]},
    inlineMath: [ [&#39;$&#39;,&#39;$&#39;],[&##39;\\(&#39;,&#39;\\)&#39;] ],
    displayMath: [ [&#39;$$&#39;,&#39;$$&#39;], [&#39;\\[&#39;,&#39;\\]&#39;] ],
    processEscapes: true,      
    processEnvironments: true, 
    processRefs: true,
    packages: {
        &#39;[+]&#39;: [&#39;ams&#39;]
    },
  },
};
</script>

In addition, I have also tried implementing the `align` environment from the amsmath package. Here is a snippet of my attempt:

...
By leveraging linearity of expectation, we can formulate the following equations within an align environment:

\begin{align}
    \mathbb{E}[I_r] & \leq  |I_{r-1}|+\sum_{u\in \overline{I_{r-1}}\setminus \{v_{r-1}\}}{\mathbb{E}[X_{u,r}]}+1\\
        & \leq |I_{r-1}| + c_2k(|\overline{I_{r-1}}|-1)|I_{r-1}|/n^2+1\\
        & \leq |I_{r-1}|\cdot(1+c_2k/n) + 1\\
\end{align}
...

Despite these efforts, when previewing my page, the text displays as plain text without any processing by MathJax. Any suggestions on how to remedy this issue would be greatly appreciated.

javascript mathjax

Answer 1

Answer №1

This solution is flawless. I hope it serves you well.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
    MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ]
        },
        svg: {
            fontCache: 'global'
        }
    };
    </script>
    <script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
    </script>
</head>

<body>

    <div class="math">
        \begin{align}
        \mathbb{E}[I_r] & \leq |I_{r-1}|+\sum_{u\in \overline{I_{r-1}}\setminus \{v_{r-1}\}}{\mathbb{E}[X_{u,r}]}+1\\
        & \leq |I_{r-1}| + c_2k(|\overline{I_{r-1}}|-1)|I_{r-1}|/n^2+1\\
        & \leq |I_{r-1}|\cdot(1+c_2k/n) + 1\\
        \end{align}
    </div>

</body>

<script>
const
    math = document.querySelector('.math')

MathJax.typeset();
</script>

</html>

Answer 2

This solution is flawless. I hope it serves you well.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
    MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ]
        },
        svg: {
            fontCache: 'global'
        }
    };
    </script>
    <script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
    </script>
</head>

<body>

    <div class="math">
        \begin{align}
        \mathbb{E}[I_r] & \leq |I_{r-1}|+\sum_{u\in \overline{I_{r-1}}\setminus \{v_{r-1}\}}{\mathbb{E}[X_{u,r}]}+1\\
        & \leq |I_{r-1}| + c_2k(|\overline{I_{r-1}}|-1)|I_{r-1}|/n^2+1\\
        & \leq |I_{r-1}|\cdot(1+c_2k/n) + 1\\
        \end{align}
    </div>

</body>

<script>
const
    math = document.querySelector('.math')

MathJax.typeset();
</script>

</html>

The MathJax system is currently unable to process LaTeX environments

Answer №1

Similar questions

Tips for animating input width as the size value changes during an ajax query transformation

How can I change an array from OData into JSON format?

Combining Two Validation Methods for jQuery Validate Plugin

Looking for a specific portion of a key-value pair

Tips on defining the specific CSS and JavaScript code to include in your Flask application

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

How to incorporate a delay in ng-repeat using AngularJS

Comparing #id_gender against assigning $('#id_gender') to the variable gender

Sending a request from JavaScript to C# methods using AJAX, with no expected response, within an ASP.NET MVC framework

Attempting to refresh the choices in a dropdown list by sending a request via jQuery leads to specific

Steps to bring an image forward on a canvas to enable its onclick function

Using innerHTML in React to remove child nodes Tutorial

Fetching a Wikipedia page using AJAX or the fetch() method

I am looking to organize my content by creating categories such as How, When, and Why for different videos. How can I achieve this for a large amount of text

Saving data from the Viewbag into a jQuery array or object on the client side

Efficient method to access two arrays simultaneously and combine them into an associative array in JavaScript

Troubleshooting Parallax Logic in NextJS

Make sure accordion items stay open even when another one is clicked

Expanding on current features with jQuery to enhance the code by incorporating validation checks for input boxes with values

Adding color between lines in Three.js