Modifying the MathJax size

[dmi3kno]

I was not able to modify the size of the inline math. For centered $$y=ax+b$$

math I use

.MathJax, .MathJax_Display  {
    font-size: 80%  !important;
}

But this does not work for inline expressions. What is the proper way to scale the inline expressions i.e. $x$?

[mcanouil]

Could you change the category to "Q&A" (via GitHub desktop/website version)?
This way you can select an answer (if there is one) to show others there is an answer.

---

Inline math are delimited by $, display math are delimited by $$.
A display math is centered, while inline math are in line, thus following paragraph rule in which they are.

If you want to decrease the size for all math:

.MathJax {
    font-size: 80% !important;
}

If you want more fine grained control:

.math.inline .MathJax  {
  font-size: 400% !important;
}

.math.display .MathJax  {
  font-size: 50% !important;
  color: #b22222;
}

[dmi3kno]

Here's my reprex. Document

---
title: "TestDoc"
format:
  revealjs: 
    theme: [simple, test-format.scss]
    slide-number: true
---

## Math

Gathered display math

$$
\begin{gathered}
Q(u)=\mu+s\ln\left(\frac{u}{1-u}\right)\\
q(u)=\frac{s}{(1-u)u}
\end{gathered}
$$

Display math

$$
F(x)=\frac{1}{1+e^{-(x-\mu)/s}}
$$

where $F(x)$ is the CDF of logistic distribution.

The content of test-format.scss

/*-- scss:defaults --*/

// fonts
$presentation-font-size-root: 30px !default;
// colors

// headings

/*-- scss:rules --*/

.math.inline {
  font-size: 20%  !important;
}

.math.display .MathJax {
  font-size: 20%  !important;
}

Result

Inline works, the display doesn't

Content of test-format.scss

/*-- scss:defaults --*/

// fonts
$presentation-font-size-root: 30px !default;
// colors

// headings

/*-- scss:rules --*/

.math.inline {
  font-size: 20%  !important;
}

.MathJax, .MathJax_Display  {
    font-size: 20%  !important;
}

Result: both inline and display math work

[mcanouil]

For revealjs, you can simply use the top level span CSS class, i.e., use your browser developper mode to understand what CSS is needed and how it should be nested.

.math.inline {
  font-size: 150%;
  color: #22b222;
}
.math.display {
  font-size: 50%;
  color: #b22222;
}

PS: you should probably read some documentation about CSS to understand the use of ,, >, etc. in CSS definitions.

[dmi3kno]

I see. .math.display not .math.display .MathJax
I was just following your earlier example. Thanks for your help!

[mcanouil]

My earlier example was not using revealjs format which is slightly different from html.

Please mark my reply as the answer if appropriate (i.e., it does answer the questions) to let others know the question has a good answer 😉

[ChoCho66]

I would like to ask an additional question.
I want to modify the margins of the equation for revealjs.
I guess it should be modified this

.MathJax_Display {
   margin-top: 1em 0em;
}

But it cannot be modified directly with scss if it has a preset value. As shown in the picture.

What method should be used to modify it?

Below is a small sample of mine.

• qmd

  ---
  format:
    revealjs:
      theme: style.scss
  ---
  
  Test
  $$
  \begin{aligned}
    f(x) = y.
  \end{aligned}
  $$
  

• sass

  /*-- scss:defaults --*/
  .MathJax_Display {
    margin: 5em 0em;
  }
  

[mcanouil]

Use !important in this particular case:

.MathJax_Display {
  margin: 5em 0em !important;
}