#1

I want to create a snippet file to change the header colors for #, ##, ### headers in Live Preview.

What CSS elements control the header colors?

What I’ve tried:

  • I searched the Discourse forum but found no answer
  • I check the css controlling the headers in Developer View, but I’m not very adept at that
#2

Hello @RoyRogers !!

Try this snippet!

This should cover all header markdown formatting.

.cm-s-obsidian span.cm-formatting-header {
    color: blue;
}

If you want to color the header md formatting per #, ##, ###, try this:

.cm-s-obsidian span.cm-formatting-header.cm-header-1 {
    color: blue;
}

.cm-s-obsidian span.cm-formatting-header.cm-header-2 {
    color: red;
}

… up until the end class is .cm-header-6

Of course, change blue or red to what ever you want. Let me know if it works or not!!

1 Like
#3

Forgot to add. A little tip for using the Developer View. When you press this button (the one on the left) or press Ctrl+Shift+C:
image

…you can use it to find out the classes for the different elements on the app. Try hovering over the title bar, or the sidebar with icons, or the header markdown formatting!

2 Likes
#4

Thank you very much @Cecilia_May ! Very generous and helpful tips.

Experimenting with your second tip for using developer view, I’ve settled on this solution, which is working for me in my snippet.

/* Settings for Heading Colors */

.markdown-source-view .HyperMD-header-1 span {
	color: #abfb7d !important;
}
.markdown-source-view .HyperMD-header-2 span {
	color: #fce1c6 !important;
}
.markdown-source-view .HyperMD-header-3 span {
    color: #f7db36 !important;
}
1 Like
#5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.