Syntax highlighting To Improve the Readability of the Code

If you want to share a block of code with the reader of your website, you may need to highlight the syntax of the code, so people can read it better. All the methods of syntax Highlighting can be divided in two categories:

  • Server-side: in which server processes the code and highlight its syntax before sending it to the client.
  • Client-side: in which server sends a block of code just as text, wrapped in certain tags, and by using some JavaScript solutions, the code would be highlighted.

The advantage of server side is that it doesn’t depend on a JavaScript library and consequently works very well when read from an RSS feed.
The advantage of client side is that the server time does not need to be spent on highlighting the syntax of the code block.

Server-side Syntax Highlighting:


GeSHi (Generic Syntax Highliter) library supports highlighting for more than 200 programming languages and configuration syntaxes. There is a Drupal module, named GeSHi Filter, and many WordPress plugins to utilize this library.

Pygments is a python-based generic syntax highlighter, suitable for use in code hosting, forums, wikis or other applications that need to prettify source code.

Code Filter:
Code Filter is a Drupal module for PHP code. It will only highlight the code written between <?php and ?> tags.

JavaScript based solutions aka Client-side:

Some popular libraries are:

Google Prettify
It’s a simple and robust solution.
There is a module for Drupal, and many plugins for WordPress which utilize this library. You don't need to add additional markup to source code and neither to specify the language of source code snippets since prettify will guess.
You can use this library even without installing a module for Drupal, or a plugin for WordPress. Just put this line in the body of the html page:

  1. <script src=""></script>

Then wrap your block of code in this:

  1. <pre class="pre-scrollable prettyprint linenums" style="overflow-x: auto;">
  2. <code style="white-space: pre; word-wrap:normal;">
  3. …. Your Block Of Code  …..
  4. </code>
  5. </pre>

It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it. There are available Drupal Module and WordPress plugins utilizing this library.



Syntax Highlighter