use mathjax render formula in a class without delimiters

I use markdown_it to convert my Markdown to html, the converted formula lost its delimiters, which caused my mathjax cannot render the formula, my mathjax confirmation is :

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script type="text/javascript">
var MathJax = {
  tex: {
    inlineMath: [ ["\\(","\\)"] ],
    displayMath: [ ["\\[","\\]"] ],
    processEscapes: true,
    processEnvironments: true
  },
  options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "math"
  }
};
  </script>

The HTML:

<p>a rational number like <span class="math inline">\begin{matrix}
L &amp; \  = \{ x \mid x \in \mathbb{Q},x \leq 0\} \cup \left\{ x \mid x \in \mathbb{Q},x &gt; 0,x^{2} &lt; 2 \right\} \\
U &amp; \  = \mathbb{Q} - L = \left\{ x \mid x \in \mathbb{Q},x &gt; 0,x^{2} &gt; 2 \right\} \\
\end{matrix}</span> .<br />
2.  A fact between two Dedekind cuts(the density of <span class="math inline">Q</span> in <span class="math inline">R</span>): For any pair of real numbers <span class="math inline">\alpha</span> and <span class="math inline">\beta</span>, where <span class="math inline">\alpha &gt; \beta</span>, there can always be found a real, and even in particular a rational, number <span class="math inline">r</span> which lies between them, i.e. <span class="math inline">\alpha &gt; r &gt; \beta</span> (and, consequently, an infinite set of such rational numbers).</p>

The demo:https://jsbin.com/qecewiz/edit?html,output

Solution

You don't say what math plugin for markdown_it you are using, but it looks like it might be an old one, as it seems to be producing jsMath-style delimiters (<span class="math">...</span>) rather than MathJax-style ones. JsMath was MathJax's predecessor, active from 2004 to 2008, and while MathJax v2 includes an extension that would parse jsMath delimiters, that is not available in version 3. There is an example showing how to look for MathJax v2 <script> tags that could be modified to look for jsMath-style tags instead, if you are proficient enough with javascript.

You may want to change the math plugin you are using for markdown_it. A quick google search found markdown-it-mathjax3 which should work with MathJax version 3. I do not use markdown_it, so can't verify this for you, but that looks like a place to start.

Also, there are some issues with your configuration. First, you should put the window.MathJax = {...} configuration in a script that appears before the script that loads tex-mml-chtml.js otherwise you risk the configuration not being available when MathJax needs it, and possibly overwriting MathJax with your configuration after it has been loaded.

I think you may misunderstand the purpose of ignoreHtmlClass and processHtmlClass. These are used to control which container elements in your document will be searched for mathematics, not what tags delimit an actual math expression. Only \(...\) and \[...\] are used for marking what is math in your configuration. The ignoreHtmlClass/processHtmlClass options are used to mark sections of the page to skip/not-skip when looking for math delimiters.