Configuring mathjax to stick to certain divs

Question

I have recently started a blog, in which I talk about programming, reading, science, and math. Now, for the programming part, I have installed SyntaxHighlighter, but I am rather confused with what I should use for math. I'm thinking about using MathJax, since I'm used to it and it's pretty good. The issue is, MathJax will interfere with other stuff. For example, it can interfere with any PHP code (which has lots of dollar signs) that I use on a programming post.

Now I want to keep the inline/block dollar signs, but I don't want it to blow up other stuff. I was thinking about associating MathJax with a certain CSS class, so that I can enclose all sections which use math extensively with those tags. By this, I mean that I can still type normally within those divs (without having it math-ified), but I can use the dollar signs and get math code. Outside the divs, any dollar signs will be left alone.

Does anyone know a configuration option that lets me do this? I know JS, but I can't find any options in the documentation. Thought I'd ask here before plowing through the code.

Sorry, this is purely a MathJax issue, and isn't related to TeX. Please see the [faq](http://tex.stackexchange.com/faq#questions). — , Feb 15 '12 at 05:34
You can request that if you like, but don't cross post. Let a moderator do the move. Incidentally, you may want to look into `ignoreClass: "tex2jax_ignore"` for your code blocks. See [here](http://www.mathjax.org/docs/1.1/options/tex2jax.html). — , Feb 15 '12 at 05:40
Thanks, right below that there's a `processClass: "tex2jax_process"`. Question answered. — Manishearth, Feb 15 '12 at 05:43

score 24 · Accepted Answer · answered Feb 15 '12 at 14:07

add class="tex2jax_ignore" to your document <body> tag, and then use class="tex2jax_process" on the containers for the parts of your page where you want to include mathematics. As others have pointed out, you can configure the class names to use for these features. E.g.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'],['\\(','\\)']],
    processClass: "mathjax",
    ignoreClass: "no-mathjax"
  }
});
</script>

Then your page would be

<html>
<head>
  ...
</head>
<body class="no-mathjax">
  ...
  <div class="mathjax">
  ... (math goes here) ...
  </div>
  ...
</body>
</html>

Hope that helps.

Davide

score 7 · Answer 2 · answered Feb 15 '12 at 05:44

7

Credit: @MarkS.Everitt

http://www.mathjax.org/docs/1.1/options/tex2jax.html

There is a configuration option, processClass: "tex2jax_process" The final configuration becomes:

tex2jax: {

inlineMath: [['$','$'], ['\\(','\\)']],'

ignoreClass: "[a-zA-Z1-9]*",

processClass: "math"

}
});

answered Feb 15 '12 at 05:44

Manishearth

14,882
8
59
76

or ignoreClass: "[a-zA-Z1-9]*" because it accepts some sort of regex, – reuns Oct 15 '15 at 19:04
1

but be careful : it's not recursive, so a you have a
in a
, it's the deeper
classname which will be considered... I personally use processClass: "mathJax.*", ignoreClass: ".*"
– reuns Oct 15 '15 at 19:12

score 0 · Answer 3 · answered Feb 03 '19 at 17:41

The existing answers are IMO not real solutions because they involve modifying your HTML. Sometimes this isn't even possible, but even when it is, who wants to dirty their markup with meaningless CSS classes just to get MathJax working?

Insert the following tag before the <script> tag that imports MathJax:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config(
        {
            elements: mathElements
        }
    );
</script>

where mathElements contains a list of DOM elements to be processed, for example something like var mathElements = document.querySelectorAll("article").

This will only work when one or more elements are present. Otherwise, "If none are supplied, the complete document is processed." — nitely, Feb 04 '19 at 01:32

Configuring mathjax to stick to certain divs

3 Answers3