Can I switch on MathJax only on a part of the page (e.g. div)?

297 views
Skip to first unread message

evgen...@gmail.com

unread,
Jan 18, 2018, 7:11:40 AM1/18/18
to MathJax Users
If a html page contains many elements and lots of text without formulas, then MathJax parsing spends computing resources in vain. Can I switch on MathJax only on a part of the page (e.g. by specifying css class of a block)? 

Davide Cervone

unread,
Jan 18, 2018, 2:06:57 PM1/18/18
to mathja...@googlegroups.com
You can specify the "elements" property in the MathJax configuration.  See


for details.  This can be an ID for an element, or an actual DOM element, or an array of IDs or DOM elements.  So you can use document.getElementsByClassName() to get the ones with a certain class name.  E.g.,

MathJax.Hub.Config({
  elements: document.getElementByClassName("myMathClass")
});

Note, however, that this will not make a noticeable difference unless your page is VERY complicated.  The location of math within the page is relatively fast (compared to the processing of that math).

Davide


On Jan 18, 2018, at 7:11 AM, evgen...@gmail.com wrote:

If a html page contains many elements and lots of text without formulas, then MathJax parsing spends computing resources in vain. Can I switch on MathJax only on a part of the page (e.g. by specifying css class of a block)? 

--
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.
For more options, visit https://groups.google.com/d/optout.

evgen...@gmail.com

unread,
Jan 21, 2018, 3:30:57 PM1/21/18
to MathJax Users
Thanks for the help. But I found the bug. If I set my array of elements by getElementsByClassName, then it works, but the parameters skipTags, ignoreClass, processClass do not work. Is this really a bug or is it a my fault?


четверг, 18 января 2018 г., 22:06:57 UTC+3 пользователь Davide Cervone написал:

Davide Cervone

unread,
Jan 22, 2018, 10:27:11 AM1/22/18
to mathja...@googlegroups.com
If I set my array of elements by getElementsByClassName, then it works, but the parameters skipTags, ignoreClass, processClass do not work. Is this really a bug or is it a my fault?

I suppose it depends on what you mean by "skipTags, ignoreClass, processClass do not work".

When you specify an array of elements for MathJax to use, then each element will be processed in turn.  That is, the contents of the element will be scanned for math, and within that element, skipTags, ignoreClass and processClass are respected within that element.  But the no classes or tags OUTSIDE the elements you provides are taken into consideration.  So if you have an element listed in the elements array and that element is inside one with the ignoreClass specified, then it will still be processed.  That is because you have explicitly told MathJax to process that element by including it in the elements array.  For example, consider the following:

<!DOCTYPE html>
<html>
<head>
<title>Check elements array and tex2jax_ignore/skipTags</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  elements: document.getElementsByClassName("math")
});
</script>

</head>
<body>

\(x+1\) not processed.

<hr>

<div class="tex2jax_ignore">
  \(x+1\) not processed.
  <div class="math">
    \(x+1\) processed.
    <div class="tex2jax_ignore">
      \(x+1\) not processed.
    </div>
    <code>
      \(x+1\) not processed.
    </code>
  </div>
</div>

<hr>

<div class="tex2jax_process">
  \(x+1\) not processed.
  <div class="math">
    \(x+1\) processed.
    <div class="tex2jax_ignore">
      \(x+1\) not processed.
    </div>
    <code>
      \(x+1\) not processed.
    </code>
  </div>
</div>

<hr>

<div>
  \(x+1\) not processed.
  <div class="math">
    \(x+1\) processed.
    <div class="tex2jax_ignore">
      \(x+1\) not processed.
    </div>
    <code>
      \(x+1\) not processed.
    </code>
  </div>
</div>

<hr>

<code>
  \(x+1\) not processed.
  <div class="math">
    \(x+1\) processed.
    <div class="tex2jax_ignore">
      \(x+1\) not processed.
    </div>
    <code>
      \(x+1\) not processed.
    </code>
  </div>
</code>

</body>
</html>


In this example, each of the <div> elements with class="math" will be processed, regardless of the container element's class or tag.  But within the math <div> the tex2jax_ignore and <code> blocks will be ignored, as usual.

So this is not a bug, though it may not be the behavior that you would like.

I hope that clarifies the situation.

Davide

evgen...@gmail.com

unread,
Jan 28, 2018, 4:01:34 PM1/28/18
to MathJax Users
Apparently, this error occurred because the script worked too early, before the element was built by the browser into the DOM tree.
When this function elements:document.getElementsByClassName("math") is called, the object "math" does not yet exist.
I placed the call to the script mathjax at the end of the html page and now it works fine.
Thanks for the help.

четверг, 18 января 2018 г., 15:11:40 UTC+3 пользователь evgen...@gmail.com написал:
Reply all
Reply to author
Forward
0 new messages