Custom CSS for Highlighting Inline Code in WordPress

Photo of author

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.

Oh hi there 👋
It’s nice to meet you.

Sign up to receive updates in your inbox once a week.

I don’t spam! You can always unsubscribe if you don't like it.

🗞️ Don’t miss the latest posts!

Subscribe to the Weekly Newsletter

I won't spam. Promise!

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments