Changing font size of un-rendered math/latex

What I’m trying to do

I want to increase the live-preview font size for latex/mathjax. I can increase it using css when I exit a $ $ block, but not inside it. It currently looks like:

you can see the $x+1$ is much smaller than the normal text size. But when rendered (I move the cursour out of it) I see:

image

as expdcted. I can use css to increase the rendered size, but i cant seem to grab the un-rendered size.

Things I have tried

various css snippets Ive found, including:

.MathJax {font-size: 1.3em;}

etc.

this increases the size of the rendered math, which I dont really need.

I tried using the dev tools + inspector, but I cant seem to grab the unrendered block - it automatically converts to the rendered one when I select the item selector tool.

For source views of math (i.e., all the time in Source mode, and while actively editing in Live Preview):

.cm-s-obsidian span.cm-math {
	font-size: 1.3em;
}

For source view of math in only Live Preview (not in Source mode):

.markdown-source-view.is-live-preview span.cm-math {
	font-size: 1.3em;
}

Thank you that works! Can you tell me how you found this out? Thanks again!

Glad you got it working!

I used the inspector tool to find the class (.cm-match) then looked in app.css to see how that class is styled when it’s the active line.

Often the inspector tool is enough, but this time I couldn’t (or maybe can but just don’t know how to) keep the line active while navigating to it in the elements pane.

If none of this makes sense to you (yet!), just check out that link for how to get started.

Oops I forgot that you used the inspector. You were probably asking about only the second part!

In dev tools:

  1. click Sources
  2. browse to app.css
  3. press Ctrl + F / Cmd + F to pull up the search bar, and type in the selector
  4. see what the style sheet has to say for itself

You can download the entire document from there if you want, but I search it in-place.

1 Like