Monthly Archives:December 2012

How to Add Syntax Highlighter in WordPress

H-DEE | Dec 5,2012 |   No Comments

There are times when we want to add a block of source-code in our articles, especially if we’re writing tech-related articles, such as Tutorials, How-To’s etc. There are many different ways to include a piece of language, script, or markup code, the most popular being the use of HTML <PRE> tags, which escapes formatting for the content enclosed in-between. However, I recommend avoiding the use of simple <PRE> tags (especially for blocks of code containing more than a couple of lines) because of the following two reasons:

  1. The output generated by <PRE> tags is not fancy, and makes it hard for us to interpret and understand the code.
  2. Sometimes, the special characters or symbols we use as a part of our code, are ignored by <PRE> tags. This usually happens, when the content (including source-code) is parsed by some text-editor (such as TinyMCE, or even WordPress default content-editor).
This is how the output of content inside <PRE> tags look like. 
It also preserves line-breaks and     spaces.

So, you might be wondering if using simple <PRE> tags are not the perfect solution, then what is?Read More