How to Easily Display Code Snippets in WordPress Post and Pages

Whenever you post code snippets in your articles, it gets interpreted instead of displaying the raw code you posted. This JovialGuide teaches you how to post code snippets in post and pages with and without a plugin in WordPress.

How to Display Code Snippets in WordPress Post and Pages Without a Plugin.

Everything shouldn’t be all about plugins in WordPress. You have to learn the technology behind those things and how they are done.

I personally call this method the manual method since you’ll have to do everything all by yourself.

This method has to do with manually converting HTML tags to their respective entities. There are a couple of sites that offer HTML tag to HTML entity conversion.

HTML entity is a piece of text that begins with an ampersand (&) and ends with a semicolon (;). HTML entities are used for displaying the reversed of HTML tags.

Since HTML tags are usually interpreted by browsers. The only way of displaying your raw codes on your post/pages is converting them to HTML entities.

<?php 
echo "Hello world.";
?>

If you post the above lines of PHP code on a PHP based website like WordPress, instead of displaying the raw code, your browser will interpret your code and this will be the output: Hello world.

Instead of

<?php 
echo "Hello world.";
?>

. The only way of posting raw code snippets on your website is by converting them from HTML tags to HTML entities.

HTML entity conversion works in a simple and easy to comprehend way. It begins with an ampersand symbol & and ends with a semicolon ;. Where you have the left or opening tag <, it becomes < and where you have the greater than sign >, it becomes >. Where you have , it becomes ".

Example 1:
If you are to post

<?php 
echo "Hello world.";
?>

it becomes

&lt;?php 
echo &quot;Hello world&quot;;
?&gt;

Example 2:
If you are to post

<div class="JovialGuide">display code snippets in WordPress post and pages without a plugin</div>

it becomes

&lt;div class=&quot;JovialGuide&quot;&gt;Easily display code snippets in WordPress post and pages without a plugin&lt;/div&gt;

They are dozens of websites that offer HTML tag to HTML entity conversion. You can have your HTML tags converted to HTML entities using their free to-entity conversion tool. You can use
Online Toolz. Online Toolz help convert your HTML tags to it HTML equivalent.

Read on to learn how to display code snippets with a WordPress plugin.

WordPress users looking for the best WordPress web hosting provider in 2019, see top 10 best WordPress web hosting service providers in 2019

If you are looking for the best Joomla web hosting provider in 2019, we wrote a JovialGuide that shows you the top 10 best web hosting companies that offer Joomla hosting in 2019. These top 10 best Joomla web hosting service providers in 2019 offer quality Joomla website hosting services.

Magento users aren’t left behind! We also wrote a JovialGuide that lists out the top 10 best Magento web hosting companies in 2019.

Display Code Snippets in WordPress Post and Pages Using a Plugin

Since this method works with a plugin, you’ll have to install and activate SyntaxHighlighter Evolved WordPress plugin. This plugin is used for displaying pure source code of any programming language without being interpreted by the browser. This plugin uses shortcodes to display raw code snippets, you won’t have to convert them to HTML entities.

They are a few other plugins you could use to display raw code snippets in WordPress.

This method is easier than the first method which has to do with having to manually converting them to HTML entities first.

After installing and activating syntax highlight WP plugin, head over to Dashboard » Settings » SyntaxHighlighter Evolved. Setup your new plugin and save.wp-syntaxhighlighter

To display your raw codes, you’ll have to use syntax highlight shortcodes to wrap them first.

Example 1:
To display raw PHP source code, you have to wrap the code snippets you want to display with

<?php 
//code to be displayed goes here
?>

.

Your code should look like this

[ php]
<?php echo="JovialGuide"; ?>
[/ php]

.

Your output will look like this

 
<?php
 echo="JovialGuide"; ?>

Example 2:
To display raw JavaScript code snippets without being interpreted by the browser, wrap your JavaScript codes with

[ javascript] 
<script>
//JavaScript codes here
</script>
[/ javascript]

.

It should look like this

[ javascript]
<script>
document.write("JovialGuide");
</script>
[/ javascript]

.

This is the output

<script>
document.write("JovialGuide");
</script>

Example 3:
To post raw CSS code on your WP posts/pages, you still have to wrap your CSS code with

[ css]
<style>
//CSS code goes here</style>
[/ css]

Your code should look like this

[ css]
<style>
body {
background-color:white;
}
.jovialguide {
height: auto;
width: auto;
}
</style>
[/ css]

Your output will be

<style>
body {
background-color:white;
}
.jovialguide {
height: auto;
width: auto;
}
</style>

Syntax highlight support shortcodes for almost all programming languages, use the name of the programming language you want to display to wrap your code snippets

Since poor website security is an alarming issue encountered by website owners. I’ve written a tutorial on how to protect wp-admin area by using .htaccess to limit access in WordPress.

Conclusion

Displaying raw code snippets on the pages and posts of your WordPress website could be done in two ways (as explained above). You can use the method that feels more comfortable to you. You’ve found out that both methods aren’t in anyway technical. Anyone without technical knowledge can practice both methods comfortably without being nailed by any obstacle.

JovialGuide

We provide comprehensive tutorials. Reach us on Facebook via JovialGuide.

3 thoughts on “How to Easily Display Code Snippets in WordPress Post and Pages

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Shares