Code snippets are a great way of sharing useful code with other website owners and programmers. All the reader has to do is copy and paste the code you publish into the correct area of their website.
As you know, you cannot simply add HTML code to your articles or the code will be executed. In this article, I will show you two ways in which you can publish code in your articles effectively and avoid this issue of HTML code being actioned.
How to Insert HTML Code Using the Code Tag
The HTML tag <code> is used to display code in a fixed-width font. In the past, the teletype text HTML tag <tt> was sometimes used, though this is not supported by HTML5. Therefore, you should always use <code> instead.
This is an example of code displayed using the code HTML tag
As I mentioned previously, HTML tags will be executed unless the less than and greater than characters are converted. For example, lets say you want to show readers how to make text bold. If you did not convert the characters, you would see:
Hello World
When you want to display HTML tags correctly in your articles, you need to change all < characters to < and all > characters to >. They are easy to remember as lt refers to less than (i.e. <) and gt refers to greater than (i.e. >).
To display the code correctly, you would need to use:
<code><strong>Hello World</strong></code>
This would display:
<code><strong>Hello World</strong></code>
If you find stripping characters a pain, I recommend using this markup box from SimpleBits. It easily converts any HTML code you want to display in your articles.
How to Insert Code Snippets Using a Plugin
On my own blog, I tend to convert the less than and greater than symbols and display code using the method mentioned above.
This is not the most common method. I have blogged for dozens of web development and internet marketing websites and have found that it is far more common for websites to display code using a syntax plugin.
SyntaxHighlighter Evolved is one of the most popular options. It allows you to display code beautifully using simple shortcodes.
[ code language=”css” ]
.green
[ /code ]
The plugin features seven colour schemes. This allows you to completely change the way code is displayed in your content.
There are a lot of great options that help you style the code the way you want to. Features include line numbers, toolbars, line wrapping and collapsable boxes. You can even make links clickable.
The final output looks fantastic. Whilst it is possible to style the <code> tag using CSS, that method does not offer the code highlighting that SyntaxHighlighter Evolved offers.
Around thirty programming languages are currently supported by the plugin. And by using a syntax plugin like this, you do not need to spend time stripping your code to ensure it displays correctly. You simply copy and paste it into your article inside the correct shortcode.
Another syntax plugin you may want to consider is WP-Syntax. It offers clean syntax highlighting and is very simple to use.
Which Method Should You Use?
There is no right or wrong method to use. The choice is yours. In my personal blog, I currently convert the less than and greater than tags and display them using the <code> tag. I have also used plugins in the past to display code in articles.
If you found this article useful, I encourage you to subscribe to WPHub to get our latest articles delivered to your inbox, Twitter or Facebook accounts.
