CODEWITHSUNDEEP
mathjax
Sr. Schneider
Sr. Schneider

Reputation: 757

MathJax 3: Change css styles

MathJax 3 loads some inline CSS like

mjx-container[jax="CHTML"][display="true"] {
  display: block;
  text-align: center;
  margin: 1em 0;
}

Let's say I want no margins, then I can add to my stylesheet:

mjx-container[jax="CHTML"][display="true"] {
  margin: 0 !important;
}

Is there a better solution for the above example? Can I modify the styles in the config (window.MathJax = {}), so that the loaded inline styles are the correct ones and don't have to be overwritten?

Upvotes: 2

Views: 1296

Answers (2)

David S.
David S.

Reputation: 21

Update for MathJax 4.0.0 beta

The attribute CHTMLmath has been renamed ChtmlMath.

<script>
MathJax = {
  startup: {
    ready() {
      var CHTMLmath = MathJax._.output.chtml.Wrappers.math.ChtmlMath;

      // Set a new value
      CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin = '0';

      // Set a new value for a CSS property containing a dash
      CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]']["white-space"] = 'normal';

      // Remove a property
      delete CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin;

      MathJax.startup.defaultReady();
    }
  }
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

Above
$$\text{Math Display}$$
Below

A CSS property containing a dash in its name will fail, as the dash will be considered as the minus operator, not as part of the property name.

Response adapted from Davide's https://stackoverflow.com/a/65478760/13733324

Upvotes: 0

Davide Cervone
Davide Cervone

Reputation: 12250

You can use

<script>
MathJax = {
  startup: {
    ready() {
      var CHTMLmath = MathJax._.output.chtml.Wrappers.math.CHTMLmath;
      delete CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin;
      MathJax.startup.defaultReady();
    }
  }
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

Above
$$\text{Math Display}$$
Below

to remove the margin setting. Or you can set the margin explicitly with

      CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin = '0';

I think that should do the trick for you.

Upvotes: 2

Related Questions