11 Syntax Highlighters To Beautify Code Presentation

When sharing codes on a website, even they are wrapped with code tags or styled differently, it is always a challenge to read them without syntax highlighting.

There are various syntax highlighters which can format the codes & color them appropriately according to the languages used. Whether it is a HTML page or runs on PHP, Ruby, Python, ASP, there is a suitable syntax highlighter.

And, here is a collection of 11 Syntax Highlighters To Beautify Code Presentation:

 

GeSHi (Generic Syntax Highlighter – With PHP)

Geshi Syntax Highlighter

GeSHi is a powerful syntax highlighter script that supports almost every language.

It is first created for phpBB forum system but became a project itself. It requires PHP to run (there is also a hack to make it work under ASP).

SyntaxHighlighter (With JS)

SyntaxHighlighter

This is a flexible & extensible syntax highlighter built with JavaScript. It supports a wide range of languages from CSS to PHP or C++ to SQL.

SyntaxHighlighter offers ready-to-use themes an new ones can be created easily for a custom presentation.

It has support for 3rd party applications like Blogger, WordPress, Joomla & many others.

Google Code Prettify (With JS)

Code Prettifier

This is the script used by the Google Code website. The script auto-detects the language used and highlights the code accordingly.

It is also customizable via CSS.

There is also an AS3 port to this code highlighting script named as3syntaxhighlight.

Highlight.js (With JS)

Code Highlighter

Highlight.js is very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

It has support for 3rd party applications and provides a Firefox extension for viewing code that doesn’t have syntax highlighting.

SHJS – Syntax Highlighting in JavaScript (With JS)

JavaScript Syntax Highlight

SHJS uses language definitions from GNU Source-highlight. This gives SHJS the ability to highlight source code written in many different languages.

Chili (With jQuery)

jQuery Code Highlighter

Chili is a code higlighter plugin for jQuery. It works very fast & can be totally customized.

It comes bundled with support for popular languages & the download package has examples on usage.

beautyOfCode (With jQuery)

jQuery Syntax Highlighter

This jQuery syntax highlighter plugin uses Alex Gorbatchev’s SyntaxHighlighter but with a twist: produces more xhtml-compliant codes.

Lighter.js (With MooTools)

MooTools Code Highlighter

Lighter.js is a MooTools-based code highlighter that can create outputs in various formats like ordered lists and tables.

It has a GeSHi-like class naming & requires MooTools 1.2.1+

ColourCode (With Ruby)

Ruby Syntax Highlighter

ColourCode is written in Ruby. It can read a source file and generate a syntax highlighted version in various formats.

Ultraviolet (With Ruby)

Ultraviolet Ruby Code Highlighter

Ultraviolet is a syntax highlighting engine that runs on Ruby. It has support for 50+ languages & 20+ themes.

Pygments (With Python)

Python Code Highlighter

It is a syntax highlighter that is built with Python. Pygments supports a wide range of languages, various output formats & it is usable as a command-line tool or as a library.

23 Comments
  1. Reply Massimo May 4, 2009 at 10:13 AM

    Although not as general purpose as Pygments, web2py also comes with a SyntaxHighliter that can be used in any python program to highlight python, html and C/C++/Java code:

    from gluon.html import CODE
    text=CODE(“def index(): return 1″,language=”Python”).xml)(

    It also has the ability to turn keywords into links to documentation.

  2. Reply medication May 4, 2009 at 1:17 PM

    Muchas gracias!, mas fácil no se puede

  3. Reply ben May 4, 2009 at 1:39 PM

    EditArea (http://sourceforge.net/projects/editarea/) provides a javascript based text editor with syntax highlighting.

    If you want to see it in action you can visit http://collabedit.com/ (click the button to create a new document).

  4. Reply PD May 5, 2009 at 5:57 AM

    Pygments is dope, and together with the extendable reStructuredText/docutils, generating docs (see Sphinx!), Website content and whatnot is just pure happyness.

  5. Reply Alex Gorbatchev May 5, 2009 at 3:14 PM

    Thanks for mentioning my SyntaxHighlighter twice!

  6. Reply Farid Hadi May 21, 2009 at 5:06 AM

    Hey this is great! Now I just need to choose one to use on my blog.

    Thanks.

  7. Reply Yaser Sulaiman May 23, 2009 at 6:11 AM

    Thanks for the helpful list.

    I just wanted to mention CodeColorer, which is a lovely syntax highlighting plugin for WordPress that is based on the GeSHi library. One of the things I like about it is that it comes with some predefined color themes (Twitlight FTW!).

  8. Reply Lars Corneliussen May 28, 2009 at 7:56 PM

    Hi,

    thanks for mention my little plugin (beautyOfCode). I have released a version that is compliant with Syntax Hightlighter 2.0 and does not need js and css references to the highlighter. Instead it dynamically loads what it needs.

    http://startbigthinksmall.wordpress.com/2009/05/28/beautyofcode-jquery-plugin-for-syntax-highlighter-2-0-by-alex-gorbatchev/

  9. Reply James June 29, 2009 at 12:18 PM

    http://www.neathighlighter.com is a very nice highlighter with option to highlighter code of different languages in a single file

  10. Reply Abel Braaksma September 30, 2009 at 11:14 AM

    Nice compiled list! If you like, you can add a link to downloadable supported language brushes for the javascript syntaxhighligher of Gorbatchev (nr 2 above). It contain both bundled and loads of non-bundled syntaxes that can be used with the highlighter, easily referenced, credited and downloaded.

  11. Reply han lee October 21, 2009 at 9:41 AM

    A simple script to hignlight the syntax of the codes, language independent.

  12. Reply Frank January 22, 2010 at 11:20 AM

    I miss the Dottoro Syntax Highlighter from the list above.
    I definitely find that online code highlighter handy.
    It provides easy customization and supports embedded CSS and JavaScript code blocks within HTML documents.

  13. Reply Amit January 28, 2010 at 6:30 PM

    SyntaxHighlighter is really good options and easy to use..

    Thanks
    Amit

  14. Reply Samuel March 15, 2010 at 4:03 AM

    jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

    It was developed specifically to fill a gap – that is: a fast, clean, client-side syntax parser.

    Please see the project homepage for more information, documentation, download, etc.

    http://www.oriontransfer.co.nz/software/jquery-syntax

  15. Reply Benjamin "balupton" Lupton July 28, 2010 at 11:15 PM

    jQuery Syntax Highlighter is a new one based on version 3 of Alex Gorbatchev’s Syntax Highlighter – a really really really popular plain javascript syntax highlighter.

    It supports such things as `code` and `pre` blocks, able to use classnames like `language-javascript` to indicate which language we would like to highlight, as well as being able to wordwrap code. You only need to include one javascript file and it will autoload the rest saving configuration time. And you can copy and paste code by selecting it normally instead of having to open a raw view like many others. It can be further customised by using the HTML5 data attribute `data-sh` or via specifying options at initialisation. A great stable choice which is updated regularly.

    Here’s the link 🙂
    http://www.balupton.com/projects/jquery-syntaxhighlighter/

  16. Reply Rainner Lins March 26, 2011 at 1:08 PM

    Here’s another one for the list. It’s a small jquery plugin that has a very small footprint and uses CSS mainly for the colors. http://rainnerlins.com/work/tinylight

  17. Reply Carl May 24, 2011 at 8:26 PM

    Great collecction, beautyOfCode is my favourite, and have a copy button that run in firefox!

  18. Reply Abi August 10, 2011 at 3:09 PM

    Hey thanks for listing the Syntax Highlighters plugins on one place, but can you please point me which one who has the toolbar? I am currently using the Alex Gorbachev’s plugin but it doesn’t have toolbar anymore only this “?”, no use at all.

  19. Reply Umut M. August 10, 2011 at 4:53 PM

    @Abi,

    To be honest, can’t remember the features of each but I suggest just giving a try to their demos.

  20. Reply atomiku February 14, 2012 at 12:27 PM

    Looking for a nice dark theme for my WP-Syntax wordpress plugin… having difficulty finding one! Thanks for the article but not 100% relevant to my interests…

  21. Reply Sharing January 16, 2013 at 1:58 AM

    Thanks for syntax highlighter collections..
    thats very helping.. 🙂

  22. Reply harry June 5, 2013 at 4:41 AM

    for me google code prettify is the best.

  23. Reply Zoltan September 24, 2013 at 5:06 AM

    A minimalist and simple MATLAB syntax highlighter is here: http://matlabtricks.com/matlab-highlighter

Leave a reply

Search