Custom CSS for Highlighting Inline Code in WordPress

Samiul • •

I use the Enlighter plugin as Syntax Highlighter for blocks of code. It however doesn’t support the formatting of inline codes.

I couldn’t find any suitable plugin that supports inline code (didn’t search that much tbh), so I opted to just add custom CSS.

I couldn’t find an easy way to customize my theme with custom CSS, so I opted to use a plugin to inject it for me: Simple Custom CSS and JS.

Using the plugin, I injected the following CSS:

code {  
    padding: .25em .5em;
    font-size: 85%;
    background: #f9f9f9;  
    color: #bf616a;  
    border-radius: 3px;
}

Now, my inline code blocks look like this. Looks much better now IMO.