use mathjax render formula in a class without delimiters

25 views
Skip to first unread message

Philip Lee

unread,
Jan 13, 2023, 3:52:20 AM1/13/23
to MathJax Users

I use [`markdown_it`][1] 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

  [1]: https://markdown-it-py.readthedocs.io/en/latest/using.html

Davide Cervone

unread,
Jan 14, 2023, 8:59:23 AM1/14/23
to mathja...@googlegroups.com
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


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 twex-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 are used to mark sections of the page to skip/not-skip when looking for math delimiters.

Davide

```
<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

  [1]: https://markdown-it-py.readthedocs.io/en/latest/using.html


--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/83444ffe-254d-47ab-95a4-17b1b73b7d8dn%40googlegroups.com.

Philip Lee

unread,
Jan 14, 2023, 11:08:24 AM1/14/23
to MathJax Users

Thanks very much for your clarification !

I used the Python version of markdown_it and the dollarmath_plugin.
Maybe producing jsMath-style delimiter is a bug for the plugin, I’d contact them to check.

Thank again !

Reply all
Reply to author
Forward
0 new messages