Customize WordPress Inline Code

Most of Technology Blogs use some Syntax Highlighter. In This Article the Methods to Customize WordPress Inline Code Shown With Needed the Snippets. We use Crayon WordPress Syntax Highlighter. That plugin actually supports inline code capturing with the fancy name of the feature – Inline Tags. There are options to Wrap Inline Tags, Capture code, Capture backquotes / backticks etceteras. Obviously we want something more manual to give power to the users. There Are Many Ways to Customize WordPress Inline Code to Look Them Pretty Nice Like Twitter Bootstrap.

Customize WordPress Inline Code : Recall Old Guide to Convert Backticks to Code

In our older guide we to convert backticks to code with simple PHP snippet. Secondly, we have easy to use user customizable WordPress Plugin which was originally for managing all the stuffs we ever need to add to Theme or Child Theme’s function.php file.

Actually WordPress has a special function reference, it s called wp_add_inline_style :

So, that way is not very difficult :

As you can see, when we wrote wp_add_inline_style, the formatting is basic. Everything on this Earth can be modified with inline CSS and a custom class, even logically used with plugins – like we did for adding drop cap to this post.

Not to forget, old HTML had support for Teletype text with tt, but HTML5 does not support HTML tt but we need to use code block. In short :

Backticks will become automatically code – that is your matter how which method you will use.
Inline Code Block will have funky colors on need – we are talking this.

Customize WordPress Inline Code : Directly Use Custom Inline CSS or Modify Theme’s CSS

This is Twitter Bootstrap style incline code’s CSS :

If you add/modify via your Theme’s / Child Theme’s CSS – that will do global change. That is great if you finalize the design for all the code blocks. If we want to override the loaded CSS, we need to add a class (like inline) and add !important :

anyone can easily embed it on post wrapping with style :

Customize WordPress Inline Code : Inline Code Like Effect With CSS

Actually, that style distracts; it is good for some posts; like this article. Now, we can call the code.inline wrapping with HTML code blocks and adding the class. It is not a coding competition, so we can add simple span style ! This is what we used for that text span style :

Pseudo method – as using the inline CSS ONLY not really doing the real work of wrapping with code.

Ultimately, the front-end will add inline CSS if we use Syntax Highlighter! This way is preserving this webpage as document with the inline style – it does not matter if we change the theme. In fact we have such 5 years old posts with incline CSS demo! In the year 2010-11, that was “new style”, in the year 2020 (may be you are reading this guide after 2020), our this span style will become old style. Like fashion designing. This way is more great, because we can customize a particular character like @ with a different color. Like @AbhishekCTRL. We needed to adjust the padding: 2px 4px :

Those who are new around CSS, padding: 2px 4px means :

Does Customize WordPress Inline Code Means Using Inline CSS?

Never! We can wrap HTML, PHP and whatever stuffs if we use <div> (or backticks get converted to <div>). <div> is not mere a word div, but needs to indicate the web server software not to process it at all. That <div> is not balanced with </div> – it would break the whole web page’s design! We can not include that word code itself with opening and closing with normal keyboard character. To avoid such conflict, we use Github Gist or some externally hosted service. They are few and smallest limitation of any PHP like software driven content management system. TinyMCE of WordPress lacks a mode – we can not indicate that when text/HTML should not be processed in Text mode. We have to use web safe characters for ASCII chars :

TinyMCE plus a syntax highlighter perform that complicated work. That is why if you switch between Text and Visual mode, the formatting usually get lost. Not impossible – <code> but impractical. It is rediscovering the need of WYSIWYG html editor.

Another point is that – wrapping with code or pre will force to look the wrapped text different from the rest of the text even if CSS is not loaded.

What’s New We Read From Your Customize WordPress Inline Code Post? Known Things!

It is possible to use inline css in this way, we have to add a custom button on TinyMCE which will easily wrap with the CSS :

That type of kind of code is actually for drawing the attention, like for example – run apt update && apt upgrade. There is no actual difference if we use real code to separate apt update && apt upgrade from the normal text of a sentence. This usage is not to escape the issue with non web safe characters. We could use italics or bold. But, sadly looks too much ordinary, mean something different and Google may think it as spam. Our typography is a bit different than that of Twitter Bootstrap, we need to increase the font-size: 110% !important; and change the font-family.

This is closer to perfect from typographical point of view, for our current design (at time of publication of this article). We used this :

We can create a Button on WordPress Text Editor – simple highlighting the text and clicking the button will add the style or we can create a custom shortcode to manually wrap the text. We should end the article here!