Are you frustrated with the default inline code and code block styles in the WordPress theme? I ask this because you are not alone. Personally, although technically the same size, I find the monospace font to be bigger than the paragraph font, while the lack of clear background for inline code makes it difficult to distinguish from regular text. Also, code blocks wrap text on line breaks, making code hard to read.
So in this post, I will talk about the steps I took to achieve custom styles that give you smaller font sizes for inline code and horizontal scrolling for code blocks.
Inline Code
When attempting to change the inline code style, I initially tried adding custom CSS to the paragraph block. However, the approach proved ineffective. After some trial and error, I discovered that I needed to make adjustments to the code block instead.
When attempting to change the inline code style, I initially tried adding custom CSS to the paragraph block. However, the approach proved ineffective. After some trial and error, I discovered that I needed to make adjustments to the code block instead.
- In your new Theme Editor, select a template to bring in the editor, and click on the three dots on the top right corner.
- Click on Styles under the Plugins section.
- Click Blocks
- Search for Code in the Search bar.
- You are at the right place when you see the screen shown here.
- Finally, click Additional block CSS.
code {
padding: 0.1em 0.25em;
font-family: var(--wp--preset--font-family--ibm-plex-mono);
font-size: 0.9em;
background-color: var(--wp--preset--color--tertiary);
}I have added this code to achieve my desired result.
Note that I used the variable --wp--preset--color--tertiary for our background color, so that the color can be automatically updated when you modify the color palette.
em vs rem
Here is a quick note for myself on the difference between em and rem. Now, both are relative units used to specify the size of an element’s font.
The main difference is that em is relative to the font size of the parent element, while rem is relative to the font size of the <html> element.
In general, people use rem for font sizes because it allows for more consistent sizing across the website, and it has the added benefit of scaling your website’s font sizes based on the user’s browser settings.
However, I used em because I also wanted to have inline code in my headings. If I had used rem, it would have made the inline code in headings very small.
Code blocks
Changing the code block were easier. Here is the code I added:
.wp-block-code code {
white-space: pre;
overflow-x: scroll;
}Here I used white-space: pre; to preserve the formatting of the code snippet. It makes sure that spaces, tabs, and line breaks are displayed exactly as they appear. I also used overflow-x: scroll; to add a horizontal scrollbar to the code block, so that people can scroll horizontally through the code even if it’s wider than their screen.
Final Thoughts
It took me a few tries while looking through the code to get what I wanted. I hope that they can provide better documentation for users. However, I do appreciate how WordPress is giving us some flexibility here by allowing us to add custom CSS.
Leave a Reply