10 jQuery Syntax Highlighters

Sam Deering

As a developer you may want to share your code on your website or blog (just like us!). There are many options out there for you depending on your chosen programming language. Whether it is a HTML page or runs on PHP, Ruby, Python, ASP, there is always a suitable syntax highlighter for you.

Predominately I want to display JavaScript so I have gone with the WordPress plugin called SyntaxHighlighter. This is the plugin that makes all pretty colours you see on our displayed code. You may want to see how to setup syntax highlighter on your blog to get started. Also, I have optionally added some text to say “double click to edit code” to each code box at the top right hand corner, see how to add custom text to your code snippets. It is always a challenge to switch between different syntax highlighters because all of them have different settings and most of them require different code identifier tags so make sure you choose wisely because you may be stuck with it.

In this post, we have collected 10 Syntax Highlighters to beautify your code presentation. They have been separated into the languages which they have been written in: jQuery, JavaScript, Mootools, PHP, Ruby & Python. Enjoy!

Written in jQuery

1. Chili

The jQuery Plugin for Highlighting Code.


Chili

Source + Demo

2. SyntaxHighlighter

Is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.


SyntaxHighlighter

Source + Demo

Written in JavaScript

3. SyntaxHighlighter 3.0.83

Is a fully functional self-contained code syntax highlighter developed in JavaScript.


SyntaxHighlighter 3.0.83

Source
Demo

4. google-code-prettify

A JavaScript module and CSS file that allows syntax highlighting of source code snippets in an html page.


google-code-prettify

Source
Demo

5. Highlight.js

Highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, and highlights it.


Highlight.js

Source
Demo

6. SHJS – Syntax Highlighting in JavaScript

Is a JavaScript program which highlights source code passages in HTML documents. Documents using SHJS are highlighted on the client side by the web browser.


SHJS - Syntax Highlighting in JavaScript

Source + Demo

Written in MooTools

7. Lighter.js

Is a free syntax highlighting class developed with MooTools. It was created with the MooTools developer in mind and takes advantage of many of the Framework’s features.


Lighter.js

Source
Demo

Written in PHP

8. GeSHi – Generic Syntax Highlighter

GeSHi started as an idea to create a generic syntax highlighter for the phpBB forum system, but has been generalised to this project. GeSHi aims to be a simple but powerful highlighting class, with the following goals:

> Support for a wide range of popular languages
> Easy to add a new language for highlighting
> Highly customisable output formats


GeSHi - Generic Syntax Highlighter

Source + Demo

Written in Ruby

9. Ultraviolet

Is a syntax highlighting engine based on Textpow. Since it uses Textmate syntax files, it offers out of the box syntax highlighting for more than 50 languages and 20 themes.


Ultraviolet

Source
Demo

Written in Python

10. Pygments

It is a generic syntax highlighter for general use in all kinds of software such as forum systems, wikis or other applications that need to prettify source code.


Pygments

Source
Demo

Win an Annual Membership to Learnable,

SitePoint's Learning Platform