Code snippets appearing with wrong background and text
-
My latest blog has blocks of code that I would like to appear with a black backgound and grey text.
When I edit my blog it looks okay:
This is a Code block and the colors are set on the sidebar as follows:
But when I preview or actually post my content, the code appears with a black edge and pale grey background like this:
Does anyone know what is causing it or how to fix it?
The blog I need help with is: (visible only to logged in users)
-
Hi @stevencnz.
I saw your screenshots. It seems that it happens because your active Theme has default rules that override the individual settings you chose in the editor. Basically, the theme is prioritizing its own look on the live site.
The best way to fix this is to change the “Global Styles” for the Code block, instead of editing just that one post. You can do this by going to Appearance > Editor and clicking the Styles icon (the half-circle).
If that doesn’t work, we would need to use a small snippet of Custom CSS to force the black background. However, just keep in mind that adding Custom CSS is a feature only available if you are on a Premium/Explorer plan or higher.
Let us know if the Styles setting works for you or if you will need further help!
-
Bug Report / Development Update Code Snippet Display Issue Some code snippets are appearing with the wrong background and text color, which can make them difficult to read. The team is aware of the issue and working on correcting the styling so that code blocks consistently match the intended theme and syntax highlighting.
-
HI @lucasbinati. Thanks for this. I don’t appear to have an Appearance > Editor menu?
Is this a limitation of my theme or something I would need to upgrade my plan for?
-
-
-
Yes, I agree with what @lucasbinati mentioned earlier that your theme’s CSS is overriding the background and text colors you set for the Code block in the editor.
Since you’re on a Premium plan, you do have access to Additional CSS. In the last screenshot you shared, you’ll see “Additional CSS” at the bottom. That’s the place to add your custom rules.
To help you understand what’s causing the issue, here’s the part of your theme’s stylesheet that’s overriding your Code block styling:code, pre, .wp-block-code { color: #666666; background: #F9F9F9; }If you add your own CSS that uses inherited values, the styles you set directly in the editor will start applying correctly again.
-
WordPress.com Forums 