How to format inline code blocks

Question

I've just set up a new blog with the twentytwentythree theme. When I go to Appearance - Editor - Styles - Stylebook I can change the default layout of different blocks including Code Blocks. For example, as a test I changed the background color to some bright pink. On my sample post I can see the color affecting regular code blocks. It doesn't work for inline code blocks though. So for example, in a list I add an inline code block to a list item. That piece of code is not colored in pink. What changes do I have to make to be able to format inline code blocks?

Thanks for your help!

Answer 1

to style your inline code blocks, you can target the <code> HTML tag using CSS. In WordPress, you can add custom CSS through the Customizer. Here’s a step-by-step guide:

1. Navigate to your WordPress dashboard.
2. Go to "Appearance" and then
3. "Customize". Find and open the "Additional CSS" section.
4. Add the following CSS to style your inline code blocks:

code {
    background-color: pink; /* Or whichever shade of pink tickles your fancy */
    padding: 2px 4px;
    border-radius: 3px;
}

Now, your inline code should appear with a hotpink background on the front end of your website. If it doesn't take effect, it might be due to a caching issue, and you might need to clear your website and browser cache. If the issue persists, the existing CSS might be overriding it, and you may need to increase the specificity of your CSS selector.