26

I would like my MathJax displayed equations in IPython Notebook to be aligned at the left instead of centered. This is controlled by a core configuration option displayAlign in MathJax as described here.

I have tried to set this option in IPython Notebook by adding this to my config.js file

MathJax.Hub.Config({ 
    displayAlign: "left"
});

but it doesn't have any effect.

How can I set MathJax core configuration options in IPython Notebook?

[Update] I have found one way that works: add the above configuration lines not to config.js but to mathjaxutils.js. In my case (Windows 8) this file is found here: C:\Anaconda\Lib\site-packages\IPython\html\static\notebook\js\mathjaxutils‌​.js. This is not a great solution though because it involves modifying a file that will presumably get overwritten the next time I update IPython.

[Update] The technique suggested by @Ian in the comments does work, but just one notebook at a time. To summarize, I created a file my_css.css whose content is

<script>
    MathJax.Hub.Config({
        displayAlign: 'left'
    });
</script>

In the notebook, if I run this cell

from IPython.core.display import HTML
css_file = 'my_css.css'
HTML(open(css_file, "r").read())

displayed equations do get left aligned, as desired.

However, I would like this to be the default for all my notebooks. I tried adding this to my custom.js

MathJax.Hub.Config({
    displayAlign: 'left'
});

and for good measure added this to my custom.css

<script>
    MathJax.Hub.Config({
        displayAlign: 'left'
    });
</script>

But neither has any effect. If there is a way to make this setting a default for all notebooks without modifying the core IPython files, that would be perfect.

0

4 Answers 4

29

Use \begin{align} and \end{align}. This does not exactly answer the question but it has the desired effect. For example try:

$
\begin{align}
\frac{1}{2} \times \frac{3}{2} = \frac{3}{4}
\end{align}
$

The above renders exactly the same as,

$$
\frac{1}{2} \times \frac{3}{2} = \frac{3}{4}
$$

except that it is left justified.

This approach has the added advantage that other alignments can be be added, as in:

$
\begin{align}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{align}
$

This last code block is from Motivating Examples in the Jupyter Notebook docs.

Other examples of aligning equations can be found here Aligning several equations

1
  • 2
    This has a lot of unintended side effects, and is a bit of a dangerous answer. The purpose of $ is signify the interpreting of LaTex, whereas $$ signifies the start of a LaTex Math Environment. There is a lot of differences between the two aside from just alignment. Probably worth reading up on before just going with this answer. Commented Nov 2, 2021 at 16:42
17

In Jupyter lab, I find that using a single $ left aligns, whereas double $ centers the equations

$
\begin{align}
c & = (0,\mu)+(a,b)\\
& =(a, b+\mu)
\end{align}
$

is left aligned whereas

$$
\begin{align}
c & = (0,\mu)+(a,b)\\
& =(a, b+\mu)
\end{align}
$$

is centered

1
  • 1
    While this may work in limited cases, the single quote is the LaTeX inline syntax which would cause all the maths to be displayed in inline mode.
    – Keto
    Commented Sep 13, 2020 at 2:25
2

You could try including a css file. For example, this set of notebooks pulls in this css file (see the final cell in the notebook) which does explicitly set the displayAlign tag, although it sets it to center.

1
  • 2
    Could by any chance give us an example as to how you included the css? Commented Nov 2, 2021 at 16:45
1

If you need to modify only one notebook, you may write text below into your code cell and run it.

%%html
<style>
.MathJax_Display{ text-align: left!important; }
</style>

It modifies CSS of div element holding rendered LaTeX contents made by $$ ... $$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.