CSS settings for LaTeX / Mathjax

JayKim · February 19, 2022, 6:34pm

In the default theme, and others as well, the font size of the equations are too small, smaller than the font size of the theme itself, while it should be equal.

It looks like this:

To fix this you could use the following snippet. Even when selecting different font sizes through the editor, the font sizes keep matching. (It could be that the 1.25 should be changed for some other themes.)

mjx-container { % works for live preview and reading mode
	line-height: 0px; 
	font-size: calc(1.25 * var(--editor-font-size));
}

The result is:

JayKim · February 19, 2022, 6:44pm

To make your notes look more like a LaTeX document you can use the following snippet:

mjx-container { % works for live preview and reading mode
	line-height: 0px;
	font-size: calc(1 * var(--editor-font-size));
}

/* reading mode */
.markdown-preview-view {
  font-family: 'CMU Serif Bold' !important;
}

/* source view and live preview */
.markdown-source-view.mod-cm6 .cm-scroller {
    font-family: 'CMU Serif Bold' !important;
}

Which will make it look like this:

It looks even better when using “justify” for text alignment:

/* reading mode */
.markdown-preview-view p {
	text-align: justify;
	text-justify: inter-word;	
}

/* source view and live preview */
.markdown-source-view.mod-cm6 .cm-line {
	text-align: justify;
	text-justify: inter-word;	
}

Screenshot:

patternsthatabide · September 2, 2022, 8:04am

This does not do anything for me. I’m on version 0.16, and tried it both with and without the use legacy editor option.

Lorenzo · September 2, 2022, 11:55am

With the new theme on 0.16 a lot of variables have changed. This should work:

mjx-container { % works for live preview and reading mode
	line-height: 0px; 
	font-size: calc(1.25 * var(--font-adaptive-normal));
}

A factor of 1.25 seems a bit too much with the new default theme, I would reduce it to something like 1.15

jcludwig · April 3, 2023, 12:49am

Here’s my current solution, as of 1.1.16. I chose to target only “display” mode latex.

mjx-math[display="true"] {
    font-size: 115%;
}

timmb · February 23, 2024, 7:11pm

I find by default the lines are too close on multi-line equations. Also, cap the line-height for inline to prevent the increased font-size from making lines containing them grow.

.math {
  font-size: 1.2em;
  line-height: 0.833333;
}

.math-block mjx-mtr:not(:first-child) 
mjx-mtd {
  padding-top: 1.0em !important;
}