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
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!!
2 Likes
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:
…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
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;
}
2 Likes
system
Closed
January 28, 2022, 9:51pm
5
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.