views:

2762

answers:

10

What Javascript libraries can you recommend for syntax highlighting <code> blocks in HTML?

(One suggestion per answer please).

+11  A: 

SyntaxHighlighter is available as a Google Code project.

mlambie
+1  A: 

SyntaxHighlighter

Franci Penov
+2  A: 

How about:

syntaxhighlighter

highlight.js

JSHighlighter

Chris Pietschmann
A simply Google search would also give me that list--but which one you prefer and why?
Török Gábor
+23  A: 

StackOverflow uses Prettify.

AaronSieb
I second this. Google Code uses it for their own repo highlighting (since they wrote it) and automatically detects the language.
Karan
Surely using one which "automatically" detects the language simply puts more weight on the client's machine/browser...
J-P
You can give the language to Prettify if you know it, it will improve the performance. This is just not used in StackOverflow due to the large language audience.
Vincent Robert
Just added this to my web site, and it's great and so simple to use!
Software Monkey
Very simple! I'm a fan from now on.
Kiewic
+3  A: 

If you're using jQuery there's Chilli:

http://code.google.com/p/jquery-chili-js/

All you have to do is include the jquery-chili.js and recipes.js, and do the highlight with

$("code").chili();

It should figure out the language by itself.

Edu Felipe
+2  A: 

I'm very happy with SHJS. It supports a bevy of languages and seems pretty fast and accurate.

Here's an example where I use it on my blog. I'm using my own custom CSS file that simulates Coda's syntax highlighting. Email me if you'd like to use it.

Andrew Hedges
+2  A: 

I'm not being argumenative but just thought it worth mentioning that if you're using a CMS or blog platform then using a backend highlighter is better for obvious reasons - Have a look at Geshi(http://qbnz.com/highlighter/) if you're interested. Actualy you could setup your server to parse HTML content through a backend technology - so there is not need for the JS highlighters at all. (The only functionality they add is the ability to print/copy[using swf])..

J-P
+1  A: 

This article at the Web Resources Depot lists a bunch of options for highlighting code, some of which use Javascript. It was published on 4th May 2009.

mlambie
+1  A: 

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

Mr Samuel
+2  A: 

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 we want it to highlight, as well as wordwrap. 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.

balupton