Some years back, we discussed how to convert the backticks to inline code blocks in WordPress posts. You can copy the final PHP code from that article or copy from this GitHub gist. You can paste that code in your theme’s functions.php file directly or use our simple WordPress plugin to paste that snippet.
If you are using some WordPress syntax highlighting plugin, such as Urvanov/Crayon Syntax Highlighter, still you can use them if the backticks are not converted to code block.
The next part is customizing the code block with CSS to give it a modern look.
---
CSS for Inline Pre and Code Tags in WordPress Posts
This is our CSS for the inline code blocks:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | code, kbd, pre, samp { font-family: monospace,serif; font-size: 1em; white-space: break-spaces; background-color: #eaeef2; color: #333333; border-radius: 6px; padding: .15em .15em; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } ::selection { background-color: #1e1e1e; color: #fff; } |
You may need to slightly adjust the parameters to that it matches your present line height of the text. The minimum thing you need is managing the white space so that the text does not overflow. This is how it will look:
Some people prefer the text colour within the code block to be red colour. Here is the working example:
See the Pen
Inline code, pre block example by Abhishek Ghosh (@abhishekghosh-the-encoder)
on CodePen.
