Block editor: can’t change format of inline code blocks

Question

I’ve just to moved an old Movable Type 5 blog over to wordpress, and the process was relatively straightforward. But now I am trying to tweak the styles of my site.

(For what it’s worth, this is using WP Multisite with the GroundWP theme.)

One particular issue I am having is with <code> blocks. I didn’t like the white-on-black default, so I changed it in the block editor (for both code and pre) to something nicer. This worked fine for preformatted multiline code blocks, but it had no effect on inline code. (To be clear, I just mean this: <code>def f(x): pass</code>)

According to this question, all I need to do is add the appropriate CSS to the theme’s “Additional CSS” box. I tried this (e.g., code {color: green;}) and it modified the multiline code blocks, but not the inline code.

Am I missing something? Is there a more fine-grained selector I should use?

Answer 1

Yes, this was a CSS issue.

See this answer on the Wordpress forums for a complete answer.

There are two interlocking problems. First, the code style is defined with a more specific selector. Second, the “Additional CSS” is effectively added to the stylesheet at the top, and so the theme’s definition takes precedence. The solution is to use the right selector, and to add !important to the style so that it takes precedence:

*:not(.wp-block-code) > code {
    background-color: #EAF7FF !important;
    color: #0066cc !important;
}