Color text with inline math in live preview mode

[waddles]

Hey guys,

I’m trying to color parts of paragraphs and/or single lines that include some latex expressions. Something like

Here is some <font style="color:blue">blue text with an equation $x_1 = x_2 + x_3$</font>

This works fine in reading mode but in live preview mode the equation isn’t rendered and is just displayed as plain text. I also tried to create a CSS snippet:

.blue {
    color: #486bea;
}

.blue mjx-container {
    color: inherit !important;
}

but this snippet has the same problem: works perfectly in reading mode but the math doesn’t render in live preview. I also played around a little with adding “.markdown-preview-section” to the CSS but that also didn’t help and since the CSS actually is applied in live preview (the text is colored, only the math doesn’t work) this doesn’t really seem to be the problem.
I did get it to work with complete paragraphs using custom CSS-styled quote blocks (>) but I would really like to use it also within a single line.

I’d appreciate any help here! This question seems rather basic but I googled around for ages now without finding a working solution, sorry if I missed something obvious.

[DiCaver]

When I paste this:

Here is some <font style="color:blue">blue text with an equation $x_1 = x_2 + x_3$</font>

… I see this in Editing mode:

… and this in Reading mode:

But when I’m in Editing mode and the blue text, I see this:

So, I’m not sure what the problem is. And the <font> tag has some limitations, so try to use <span> instead.

<span style="color: red; font-size: 18px; font-family: Arial;">Custom Styled Text</span>

Or with CSS:

<style>
  .custom-text {
    color: red;
    font-size: 18px;
    font-family: Arial;
  }
</style>

<span class="custom-text">Custom Styled Text</span>

Hope it helps. Cheers, Marko

[ariehen]

In Live Preview, Markdown won’t render either within HTML tags. I don’t think there’s any way to get around that. There, of course, may be a plugin to help here but I don’t recall seeing one.

source mode | live preview | reading view

---

This CSS will change all math blue:

mjx-container[jax="CHTML"] {
    color: blue;
}

as a cssclass to only change the math color in certain notes:

.blue-math mjx-container[jax="CHTML"] {
    color: blue;
}

---

If all the math in one note colored the same is still to broad, I’d look into making some custom callouts. e.g. > [!blue-math] , > [!salmon-math]. It might take some time to get the callouts setup, but once they are you can reuse them everywhere.

[waddles]

Thank you for the answers!

@DiCaver I see the same behaviour you describe. What I would expect/want to achieve is the equation to look in both modes like it now looks only in reading mode. That it switches to source view when entering the text within the HTML tags with the cursor, is of course fine and necessary for editing. For my purposes, the <span> tag shows the same behaviour as <font>.

@ariehen Thanks for explaining. Unfortunately coloring all math in a note is not an option since I need to be able to have colored and uncolored text (both including math) within the same line. But the callout solution works at least for whole blocks/paragraphs. I created the following CSS snippet (with some help of ChatGPT):

.callout[data-callout="comment"] {
    background-color: #f4f5f7;
    color: #486bea;
    padding: 5px;
    border-left: 5px solid #486bea;
    border-radius: 5px;
}

.callout[data-callout="comment"] .callout-title {
    display: none;
	padding: 0;
	margin: 0;
}

.callout[data-callout="comment"] .callout-content p {
    margin: 0 !important; 
    padding: 0 !important;
}

.callout[data-callout="comment"] mjx-container {
    color: inherit !important;
}

That doesn’t cover all of my usecases but is still a step forward

I guess, for now I have to accept that I might not find a perfect solution. Thank you for your input anyways!