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

admin管理员组

文章数量:1122846

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?

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?

• css
• block-editor
• formatting

Share Improve this question asked Apr 6, 2024 at 18:14 Andrew JaffeAndrew Jaffe 12355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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;
}

本文标签： cssBlock editor can’t change format of inline code blocks