Request a Quote | +91 979102 5665

Display Code Snippets in WordPress Without Plugin

Display Code Snippets in WordPress Without Plugin

Displaying a block of code in WordPress post and pages is not a challenging task when there are plenty of plugins can do the job for you with ease.

But most of us install plugin by plugin for all simple task and end up with a slow website.

Yes, plugins are essential for the complicated task but posting source code in a WordPress post is simple and does not need any fancy plugin.

Here I will guide you how to do add code manually in WordPress post and pages.

Make a copy of code by eliminating a list of entities which may break the look of code block on the front end.

< = &lt; or &#60;
> = &gt; or &#62;
/ = &#47;
] = &#93;
[ = &#91;
” = &quot; or &#34;
‘ = &#39;
“ = &ldquo; or &#8220;
” = &rdquo; or &#8220;
‘ = &lsquo; or &#8216;
’ = &rsquo; or &#8217;
& = &amp; or &#38;

TIP: You can do this using free service like “Postable“. Just paste your code and you will get it in a format we need.

Now it is simple, just wrap up the code inside an HTML tag “code”.
<code>……..your code……..</code>

TIP: Use the text editor (not visual wordpress editor) and paste the wrapped code where you want.

Then the last thing to do is styling the code tag
Given below my sample CSS add it in your theme CSS file.
It will globally apply for all <code> tag in WordPress.

/**Code Block CSS**/
code
{
color: #66FCF1;
display: block;
background-color: black;
padding: 1.5em;
}

 

This CSS code will display code in an exact way as above code displayed. You can customize code block css the way you need.

I have given this in a simple way, there are more ways to archive this, leave your comment below.

Leave a Reply

Close Menu
×

Cart