CODEWITHSUNDEEP
mathjax
Manishearth
Manishearth

Reputation: 16198

Configuring mathjax to stick to certain divs

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.

Upvotes: 19

Views: 4275

Answers (3)

Jack M
Jack M

Reputation: 5995

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").

Upvotes: 0

Davide Cervone
Davide Cervone

Reputation: 12250

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

Upvotes: 24

Manishearth
Manishearth

Reputation: 16198

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"

}
});

Upvotes: 7

Related Questions