How to Display Raw Codes in Your WordPress

How to Display Raw Codes in Your WordPress post

In this tutorial, we will show you how to easily display code on your WordPress blog. WordPress filters out any raw code added into blog posts, pages By default. Don’t worry, displaying raw code on your wordpress blog is very easily. There’s 2 ways to display raw code on your WordPress blog. You can do manually, or you can use a plugin.

We will discuss about both in details, So you will know how to do it with or without help of a plugin.

1. First, let’s go over how to display raw code manually.

You can to do easily by plugin. But if you want to raw codes in you wordpress site occasionally. So no need to go through the hassle of installing plugin. Because after all, plugin to your wordpress site will slow it down a bit.

You can add this by encoding the code in your HTML entities. You could write as like this:

>?php echo “Hello World”; ?<

The main problem with converting code into the HTML entities. It is very difficult to do manually. For this you can use online tools to convert code into HTML entities as like this Web2.0Generators. After converting your php, javascript and html etc you can to add code easily into HTML entities in between the <pre> and </pre> tags also if you want to add some style so you can to add code between the <code> and </code> tags.

2. Now we want to show, how to display raw code with plugin.

We’ll can to do this easily by using a plugin. And that’s using plugin called Syntax Highlighter Evolved.

For more details, you can to see our step by step tutorial on how to install a WordPress plugin.

After activation, you need to review Settings » Syntax Highlighter to configure the plugin settings.

The default plugin settings works for most websites. But, you should review all settings and make changes if necessary.

Syntax Highlighter Evolved uses simple shortcodes to display code. For each programming language, you have to write between these shortcodes.

For PHP you could add your code like this:

&lt;?php
echo “Hello World”;
?&gt;

It will look in your post like this:

1
2
3
<?php
echo "Hello World";
?>

For CSS you could add your code like this:

.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#222222;
}

It will look in your post like this:

1
2
3
4
5
.entry-title {
font-family:"Open Sans", arial, sans-serif;
font-size:16px;
color:#222222;
}

Syntax Highlighter will automatically highlight the code for that particular language. It will also add line numbers and handle tab indent properly. Your users will be able to easily copy and paste code snippets from your WordPress site.

We hope you found our post helpful. Do you have any questions about how to display raw codes in your wordpress post? Feel free to let us know in the comment section below. You can also find us on Twitter and Facebook.

Leave a Reply

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