CSS settings for LaTeX / Mathjax

Share & showcase
#1

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:

image
image893×332 41.7 KB

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:

image
image888×357 42.8 KB

#2

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:

image
image871×490 50.2 KB

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:

image
image903×480 51.4 KB

#3

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.

#4

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