Find math expressions by HTML class instead of delimiters

[ABOU SAMRA Jean]

Hi,

Suppose I have some HTML that looks like

  The determinant of a quadratic polynomial <span class="math-inline">ax^2 + bx + c</span> is <span class="math-display">\Delta := b^2 - 4ac</span>

instead of

  The determinant of a quadratic polynomial \(ax^2 + bx+c\) is \[\Delta := b^2 - 4ac\]

What's the simplest way to make MathJax render this? I would prefer to avoid inserting delimiters around the math spans through JavaScript and having them parsed by MathJax, and instead make MathJax directly take the HTML content of these <span> tags as input. But most importantly, I really want to avoid MathJax searching the text from the whole page for \( and \[, to speed up loading.

Thanks,

Jean

[Davide Cervone]

Suppose I have some HTML that looks like

  The determinant of a quadratic polynomial <span class="math-inline">ax^2 + bx + c</span> is <span class="math-display">\Delta := b^2 - 4ac</span>

instead of

  The determinant of a quadratic polynomial \(ax^2 + bx+c\) is \[\Delta := b^2 - 4ac\]

What's the simplest way to make MathJax render this?

There is an example at

https://docs.mathjax.org/en/latest/upgrading/v2.html#math-script-example

of how to make MathJax v3/v4 look for the older v2 <script> tags that marked the math.  You should be able to modify the querySelectorAll() call to be something like

querySelectorAll('span.math-inline, span.math-display')

instead, and use

const display = node.classList.has('math-display');

in order to determine whether it is a display equation or not.  That should do what you are looking for.

I really want to avoid MathJax searching the text from the whole page for \( and \[, to speed up loading.

That is generally not the most expensive part of the rendering pipeline.  You might consider using the lazy typesetting extension if you have a page with a large number of expressions, as that will likely be more effective at speeding up the initial page rendering.  See

https://docs.mathjax.org/en/latest/output/lazy.html

for details.

Davide