By default, WordPress automatically texturizes, or interprets, HTML or PHP code in blog posts and pages but if you run a development website, project documentation, product help section or anything similar from a WordPress website, chances are you’ve needed to display code at one time or another. In this article, we will show you how to easily display code on your WordPress site.
There are two solutions to this problem: type the code manually using HTML character entities and use the native WordPress <pre> tags, or you can install a plugin that automates the code entries using a certain pre-programmed tag. One highly recommended plugin is called SyntaxHighlighter Evolved, which was designed by official WordPress developer Alex Mills.
The first solution is pretty simple. Only you have to do is to add your text between the tags <pre> </ pre> , in “Text” mode. For additional styling you can wrap code between <code> and </code> tags.
If you want to use the plugin, then you first need to install it and activate. Upon activation, you need to visit Settings » Syntax Highlighter to configure the plugin settings.
The default plugin settings should work for most websites but better to check them again and make changes if necessary.
Syntax Highlighter Evolved uses simple shortcodes to display code. For each programming language you need wrap your code in the shortcode for that language. You can find more information in the plugin settings:
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.
As you can see, adding code to your website is not that difficult and can be useful for WordPress bloggers who want to display programming code in their blog posts.