Do you want to display code on your WordPress site? By default, WordPress filters out any raw code added into blog posts, pages, widgets, or comments. In this article, we will show you how to easily display code on your WordPress site.
First you need to install and activate the Syntax Highlighter Evolved plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit Settings » Syntax Highlighter to configure the plugin settings.
The default plugin settings should work for most websites. However, you should review all settings and make changes if necessary.
Each option has detailed description to explain what it does. Once you are done, simply click on the save changes button to store your settings.
Syntax Highlighter Evolved uses simple shortcodes to display code. For each programming language you need wrap your code in the shortcode for that language.
For PHP you would wrap your code like this:
[php]
<?php
echo “Hello World”;
?>
[/php]
It will appear in your post like this:
<?php echo "Hello World"; ?>
For CSS you will wrap your code like this:
[css]
.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727;
}
[/css]
It will appear on your site like this:
.entry-title {
font-family:"Open Sans", arial, sans-serif;
font-size:16px;
color:#272727;
}
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.
How to Display Code in WordPress Without Using Plugin
Many bloggers do not run a development blog, so they don’t need to add sample code snippets in their posts very often. For rare occasions, you can add code by encoding the code into HTML entities. Like this:
>?php echo "Hello World"; ?<
The problem with converting code into HTML entities is that it is difficult to do manually. You can use online tools like this one, to convert code into HTML entities.
By converting PHP, HTML, JavaScript code into HTML entities, you can paste them into your WordPress posts. For additional styling you can wrap code between <code> and </code> tags.
We hope this article helped you find the best syntax highlighter plugin for WordPress. You may also enjoy our article about 13 plugins and tips to improve WordPress admin area.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Thank you @Syed for your great tutorial.
Nice blog with excellent information. Thank you, keep sharing.
Great, Just wonder how you can post the code inside
and still make the code look like text.
Like how you can post this code
.entry-title { font-family:”Open Sans”, arial, sans-serif; font-size:16px; color:#272727; }to your post without changing how it shows on the post.
Thank You for this post.
There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on WordPress plugin search!
Synatx Highlighter Evolved plugin
Thanks Syed….Great tutorial. I want to ask you that how we can change the font size of code?
I think there is a problem with Syntax Highlighter Evolved in latest versions of WordPress. I, and others, are having it incorrectly display html entities. See support forums for more.
How to show code without plugin only coding?
Personally, I use WP-GeSHi-Highlight, which uses the standard GeSHi codes. I think I used a predecessor of the plugin featured here, but I had difficulty finding the language codes.
Of late, I’ve found it easier to use GISTs to display code and then just embed the Gist in the post
@AJAY, please tell me more about using GIST to display code samples.
Thank you!
I do absolutely agree. They´re pretty well formatted and syntax-highlighted, they´re forkable and they´re versionable too. So WP GIST is the way to go for me at least..