Request a Quote | +91 979102 5665

Display Code Snippets in WordPress Without Plugin

Display Code Snippets in WordPress Without Plugin

With Gutenberg

With the latest releases of Gutenberg, it is really simple to add code in a WordPress post.

Just click on Add Block and Search for “Code”. Under the Formatting category, you can find a block named “Code”. Select it and paste your code inside the block. That’s it.

If you don’t have Gutenberg you can install from plugins->Add New or Simply upgrade WordPress to <5.XX versions

Gutenberg Code block will generate block like shown bellow & I have used custom CSS for the code block.

/**Custom Css**/ 
code { color: #66FCF1; 
display: block; 
background-color: black; 
padding: 1.5em; }

Without Gutenberg (Not Recommended)

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;

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 achieve this, leave your comment below.

Leave a Reply

Close Menu
×

Cart

If you need anything?

Let us know you were here, Just drop us your info below. we will connect with you as soon as possible.