Rendering one CSS class in inline mode, and another in display mode

81 views
Skip to first unread message

jahvascr...@gmail.com

unread,
Jun 26, 2017, 10:45:52 AM6/26/17
to MathJax Users
Hello,

I'm trying to configure MathJax so that in the following document, the first equation is rendered inline, and the second in display mode:

<html>
…
<body class="body">
<p>Inline: <span class="mathjaxInline">\frac{1}{2}</span>.</p>

<p>Display:</p>
<div class="mathjaxDisplay">\frac{3}{4}</p>
</body>
</html>

I'm already using these options:

ignoreClass: "body";
processClass: "mathjax";

but it requires me to put $…$ and \[…\] around inline and display mode, respectively, instead of simply using two separate CSS classes.

I searched through the docs and the FAQ, and didn't find any option to tell MathJax that a class means inline, and another means display.

I know that I can use a <script type="math/tex;mode=display"> tag, but scripts parse special charactes like < and & differently, and in my case thse are already html-encoded. Is there a way to get the same effect with a simple span, without manually injecting the $…$ and \[…\] with a piece of JavaScript?

William F Hammond

unread,
Jun 26, 2017, 2:59:54 PM6/26/17
to mathja...@googlegroups.com

On Mon, Jun 26, 2017 at 7:45 AM, <jahvascr...@gmail.com> wrote:
I'm trying to configure MathJax so that in the following document, the first equation is rendered inline, and the second in display mode:

<html>
…
<body class="body">
<p>Inline: <span class="mathjaxInline">\frac{1}{2}</span>.</p>

<p>Display:</p>
<div class="mathjaxDisplay">\frac{3}{4}</p>
</body>
</html>

Small but complete html file attached.


--
javahscriptmaniac.html

Peter Krautzberger

unread,
Jun 27, 2017, 2:38:12 AM6/27/17
to mathja...@googlegroups.com
Hi,

You can (ab)use the jsMath pre-processor for this, http://docs.mathjax.org/en/latest/options/jsMath2jax.html.

It expects class="math" and differentiates inline and block by span and div, https://github.com/mathjax/MathJax/blob/master/unpacked/extensions/jsMath2jax.js#L8-L17

Regards,
Peter.

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

jahvascr...@gmail.com

unread,
Jun 27, 2017, 7:55:12 AM6/27/17
to MathJax Users
Le mardi 27 juin 2017 08:38:12 UTC+2, Peter Krautzberger a écrit :
Hi,

You can (ab)use the jsMath pre-processor for this, http://docs.mathjax.org/en/latest/options/jsMath2jax.html.

It expects class="math" and differentiates inline and block by span and div, https://github.com/mathjax/MathJax/blob/master/unpacked/extensions/jsMath2jax.js#L8-L17

Thanks a lot, this works like a charm!

For future lurkers, here's a working example document using this: https://jsfiddle.net/shfL85sz/2/

<!DOCTYPE html>
<title>Maths!</title>
<script
  type="text/javascript"
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  extensions: ["jsMath2jax.js"],
  jsMath2jax: {
    preview: "TeX",
  },
});
</script>

<p>Dollars $are$ preserved</p>

<p>Inline: <span class="math">\frac{1}{2}</span>.</p>

<p>Display:</p>
<div class="math">\frac{3}{4}</div>

Reply all
Reply to author
Forward
0 new messages