How to change the color of Markdown elements (*, 1., [, $, etc.)?

[lebigot]

What I’m trying to do

I would like to set the color of Markdown elements (like *, 1., [, $…) in both the light and dark themes.

The current (Things theme) color is not very visible in dark mode and makes things like $42 and [CLS] be displayed in a funny way (the dollar sign and the brackets don’t look like regular text, when they should, because I escaped them).

Things I have tried

A Google and forum search didn’t turn up anything obvious for a CSS noob.

I also raise an issue with the Things theme, to no avail.

[ariehen]

Give these a try…

.cm-formatting-strong {
  color: violet !important;
}

.cm-formatting-em {
  color: var(--color-blue) !important;
}

.markdown-source-view .cm-formatting-list-ol {
  color: var(--color-green);
}

.cm-s-obsidian span.cm-formatting-link { 
color: var(--color-yellow); 
} 

.cm-s-obsidian span.cm-math {
  color: var(--color-orange);
}

Things →

Default theme (doesn’t need !important) →

[lebigot]

Thanks.

In order to get the regular text color mentioned in the question, I substituted the color with --text-normal.

The CSS above indeed changes the colors of the markdown elements for numbered lists and strong/emphasis, indeed (number, stars, underline).

Now, unfortunately, things like the escaped Markdown elements I was mentioning are left untouched: \$ and \[ are still quite illegible. They are useful for typing amounts in dollars, or text that contains brackets. What would the CSS be for these?

PS: Is there a way I could answer this question by myself? I tried the CSS explorer (?) with Cmd-Opt-I (macOS), to no avail…

[ariehen]

I put the colors in so it was easy to see what was going on. Wasn’t sure if you were looking for everything to be the same color or not. Forgot the escaped characters bit. This should take care of the first character after an escape:

.cm-s-obsidian span.cm-hmd-escape-char {
  color: var(--color-red);
}

Yeah, if you look in the dev tools, there’s a box with an arrow on the top left ( or cmd+shift+c ). Elements at the top, Styles below. Then poke around at things to get an idea of what is what.

Maybe you’ve see this, but it’s a good resource:

Getting comfortable with Obsidian CSS

While using Obsidian, if you press CTRL-SHIFT-I (option-cmd-i for mac) then it will bring up the developer window. In the developer window, at the top left is an icon with a pointer in a box. This allows you to select elements on the screen and see how to refer to them and what styles. I will occasionally update this post with more pictures of how to do stuff. [Developer Tool] You can hover over items to see what they do and then click on an item to select it. Then go down to the styles secti…

[CawlinTeffid]

I was going to suggest you up upvote this feature request, but then I saw you are the one who posted it! (Thanks!) But I’ll leave it here for others.

Escaped characters should have the normal text color in Live Preview

Steps to reproduce In Live Preview, type escaped characters like \$ (very useful for entering dollar amounts) or \* (useful for entering some quick math formulas). Expected result When escaped, characters are meant to be normal text and should thus have the same color as normal text. Actual result Escaped characters appear in the same color as their non-escaped version ($ for a math formula, * for italics or bold, etc.). This is unexpected, as they are normal text. Also, and more importantl…

[lebigot]

Yes. I had forgotten I had posted it already, and I had missed the response from 2 months ago (which explains that)…

[CawlinTeffid]

Yesterday I searched before making a feature request to see if someone had already done it — and found that I had, half a year ago. So, you’re not alone.

[HametonJose]

Occasionally it’s necessary to add styles to Markdown material, such as mass variables and CSS characteristics for colour and font sizes.

Nevertheless, neither native Markdown nor any markdown parsers enable the styles used by CSS.