Displaying Code in WordPress
WordPress is the most popular blogging platform in use worldwide. If you are a programmer, developer or web designer and also blog on your WordPress blog, your posts must often include some code which you want to share with your readers. Now the problem with posting code directly into WordPress is that it either tries to execute that code or rewrites it as something else.
The text editor in WordPress was meant to post only simple text directly, not code with complex characters like <, >, " etc.
There are two ways to insert code into your WordPress posts.
Convert and Insert Code Manually
The first way is to convert your code manually using HTML entities so that the formatting is done properly in WordPress. You can either do it manually by replacing < by <, > by >, etc. Alternatively, you can use an online code converter to convert the code into simple text which can be displayed properly in WordPress.
For example, to display HTML code in your WordPress posts, you could use an HTML entities converter.
Go to https://web.forret.com/tools/html.asp and enter the HTML code you want and click on convert.
Bright Hub is the leading tutorial site online.
<head><title>Bright Hub is the leading tutorial site online.</title></head>
Copy the converted code and paste it into the WordPress Post Editor.
Install a Plugin to Display Code in WordPress Posts
The other alternative is to use a WordPress Plugin. To know more about plugins, check out How to Install, Remove and Configure Plugins in WordPress.
There are many plugins which allow you to insert and display code correctly on WordPress posts. Some of them are Syntax Highlighter, Syntax Highlighter Plus, WP Advanced Code Editor and Google Syntax Highlighter.
Of these, the simplest and the best plugin is the Syntax Highlighter plugin. It is easy to use and configure, and it allows you to display many languages in a visually pleasing way.
Download the Syntax Highlighter Plugin from WordPress Plugins.
Upload it on your wordpress/wp-content/plugins directory. Go to your WordPress Dashboard > Plugins and activate the Syntax Highlighter Plugin.
Once your plugin is activated, you can configure the plugin settings from Settings > Syntax Highlighter.
Now to insert code into your WordPress posts, just type whatever code you want in the Visual View of the WordPress Post Editor.
After you have inserted your code, just use these tags to enclose that code.
For example, if you insert PHP code, just enclose your code in these tags: [php][/php]
echo “Hi, this is PHP code”;
The Syntax Highlighter plugin supports many other languages:
- PHP — php
- Python — python
- XML — xml
- HTML - html
- C++ — cpp
- C# — csharp
- CSS — css
- Java — java
- Ruby — ruby
- SQL — sql
- Visual Basic — vb
- Delphi — delphi
Just insert your code, use the appropriate enclosing tag and your code will be displayed visually.