How to have css apply in both Reading and Editing modes?

What I’m trying to do

I’m trying to apply header css, specifically css to headers, that applies to both the editing in reading views.

After looking around this is what I have.

.markdown-source-view.mod-cm6 .cm-header-1,
.markdown-rendered .cm-header-1 {
  color: black;
  text-shadow: var(--h1-color) 0 0 13px; 

As of now, this black color only shows up in editing mode, when I switch to reading mode it changes back to red (–h1-color) with no text-shadow.

Things I have tried

The above. I also tried using .header-1 after .markdown rendered as well as a couple more configurations. To no avail.

Give this a try. It’s good for Editing and Reading views.

.markdown-source-view.mod-cm6 .cm-header-1,
.markdown-rendered h1 {
  color: black;
  text-shadow: purple 0 0 13px; 

Screenshot 2023-11-18 at 14.50.09

I changed the text-shadow so I could see it better. :grinning:

In the default theme (where I tested), the value of --h1-color: is set to inherit, so the text-shadow: var(--h1-color) bit wasn’t doing anything for me. If it’s red for you, that’s coming from a theme or some other CSS you have.

Have a look at this topic when you get some time. There are lots of great tips on poking around in the inspector:

1 Like

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