The Simple Solution to Displaying Code on a WordPress Site

March 16, 2016 / Web Hosting

For the uninitiated the task of displaying code on a WordPress site can seem more than a little daunting; we will simplify the process and guide you to a successful conclusion.

Firstly WordPress are quite strict, they will block attempts to post raw code, whether it be attached to comments or widgets. This from a security point of view is quite reasonable. However, the facility to share ‘snippets’ on your blog is an absolute must.

So straight to the point, in order to display time-saving ‘snippets’ of code then first install the Syntax Highlighter Evolved plugin. Once you have activated the plugin it needs to be configured; do this by going to ‘settings’ then ‘Syntax Highlighter’. It should be relatively straightforward.

OK, hopefully, you are now into the Syntax Highlighter settings. Here you’ll have the option to adapt settings to your requirements. Check out the options and when you’re happy ‘save changes’. In truth, the basic plugin settings generally do the job.

For PHP you would wrap your code like this:

 

[php]

[/php]

It will appear in your post like this: 1 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:

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

The code for your chosen language will be automatically highlighted with the inclusion of the line numbers and handle tab indent. It’s all very clever, recipients can then simply copy and paste ‘snippet’ codes.

Please note: You don’t always require a plugin for WordPress, because code can be displayed without a plugin. Read on…

Code can be encoded into HTML entities. Here’s an example:
>?php echo "Hello World"; ?<

You can go online and find an appropriate tool but this, I’m afraid, becomes a rather laborious task. OK perhaps for low-volume users, but not recommended long term.

Once you have converted HTML, PHP, and JavaScript code into HTML format, you can then simply paste them into any WordPress post. Wrapping code between and will allow for additional styling.