109

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

(One suggestion per answer please).

mlambie
  • 7,467
  • 6
  • 34
  • 41

13 Answers13

104

StackOverflow uses the Prettify library.

Demitri
  • 13,134
  • 4
  • 40
  • 41
AaronSieb
  • 8,106
  • 8
  • 39
  • 58
  • I second this. Google Code uses it for their own repo highlighting (since they wrote it) and automatically detects the language. – Karan Oct 02 '08 at 04:14
  • Surely using one which "automatically" detects the language simply puts more weight on the client's machine/browser... – James Oct 02 '08 at 08:42
  • 2
    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 Oct 02 '08 at 08:54
  • Just added this to my web site, and it's great and so simple to use! – Lawrence Dol Feb 22 '09 at 05:53
  • @Vincent: it improves more than just performance ;-) – SamB Nov 29 '10 at 17:11
  • @SamB: feel free to edit the answer to add more information. If you don't have enough reputation, you can add a comment and someone will add it to the answer – Vincent Robert Nov 29 '10 at 17:22
  • by any chance this works on Drupal 7 ? i will try this later tonight and let you all know, but prior to that if anyone knows any potholes do let me know – JackyBoi Feb 24 '12 at 09:32
  • For me works just fine. Really easy to implement into the HTML and the result is astonishing. Thanks for the suggestion :) – Timbergus Dec 03 '13 at 10:07
  • Is it possible to comment code like Git-hub does? – Anatoly May 20 '14 at 09:43
  • This is now archived. – Lucien Jan 02 '23 at 19:44
44

I recently developed one called rainbow.

The main design goal was to make the core library really small and make it really easy for developers to extend.

See http://rainbowco.de.

Craig
  • 2,684
  • 27
  • 20
  • 2
    I just ran across Rainbow today — it looks to me like it can discriminate more finely than Prettify (like for instance, being able to tell when `rdf:type` is used as an element and when it's an attribute). – Roger_S Jun 09 '12 at 01:19
  • 3
    This needs to go up to the top, Craig. I tried all of the other solutions and only Rainbow handled Python correctly and had *readable* theme stylesheets. Amazing plugin! – Blender Aug 20 '12 at 02:54
26

SyntaxHighlighter is available as a GitHub project.

Mike Pennington
  • 41,899
  • 19
  • 136
  • 174
mlambie
  • 7,467
  • 6
  • 34
  • 41
16

What about Prism by Lea Verou.

From her blog post announcement in June (2012):

  • It’s tiny. The core is only 1.5KB minified & gzipped.
  • It’s incredibly extensible. Not only it’s easy to add new languages (that’s a given with every syntax highlighter these days), but also to extend existing ones.
  • It supports parallelism through Web Workers, for better performance in certain cases.
  • It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
Ilya Tuvschev
  • 161
  • 1
  • 2
  • This ended up being the best option of all the answers for me because of the ease of adding new language definitions. – Mike Grace Mar 03 '17 at 07:02
15

jQuery Syntax Highlighter is a new one based on Google's Prettify - 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.

Mike Pennington
  • 41,899
  • 19
  • 136
  • 174
balupton
  • 47,113
  • 32
  • 131
  • 182
  • The author actually says it's based on Google's Prettify, not SyntaxHighlighter. Looks just like SyntaxHighlighter 3, though, but seems to require a lot less work to set up. Thanks for the link! – Tieson T. Mar 29 '11 at 18:39
5

How about:

syntaxhighlighter

highlight.js

JSHighlighter

Chris Pietschmann
  • 29,502
  • 35
  • 121
  • 166
5

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
  • 10,197
  • 13
  • 44
  • 41
  • The links to examples on that page all lead to an expired domain full of ads so it's a little bit difficult to get an idea of what this highlighter looks like. – Nathan Osman May 27 '14 at 05:01
5

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
  • 21,688
  • 16
  • 67
  • 79
4

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.

ioquatix
  • 1,411
  • 17
  • 32
  • unfortunately it thought a standard FpML message to be SPAM :) – ehosca Sep 08 '11 at 19:21
  • @ehosca, are you able to give me some clarification on problem you are having? – ioquatix Sep 13 '11 at 01:40
  • when i paste the xml in http://goo.gl/PPcDx to http://goo.gl/qSqm9 it says Invalid content, appears to be spam. hope this helps. – ehosca Sep 14 '11 at 13:28
  • You need to include some line breaks in the text, otherwise it looks like link spam. I can't remember the exact formulae I used, but I think if you have more than one URL per line the text is considered spam - this is because heaps of bots were spamming the system (http://www.syntax-highlighing.com). – ioquatix Sep 15 '11 at 04:41
3

I'm not being argumentative 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. Actually you could set up your server to parse HTML content through a backend technology — so there is no need for the JS highlighters at all. (The only functionality they add is the ability to print/copy[using swf].)

Roger_S
  • 499
  • 1
  • 4
  • 18
James
  • 109,676
  • 31
  • 162
  • 175
  • 2
    It's not obvious to me. Why is using a backend highlighter better? – Evan P. Mar 11 '13 at 06:31
  • 1
    Yeah, I, too, would *really* love to know what is "obvious" about preferring to send a larger response to the client... – ZenMaster Jun 08 '13 at 03:35
  • 1
    I prefer the syntax highlighting to still be present on devices that don't have JS enabled. Additionally, client-side highlighters have runtime costs that can be quite hefty if you've got lots of code to highlight. That said, it depends on your specific use-case :) – James Jun 10 '13 at 09:56
  • What devices don't have JS enabled? – Jack G Mar 22 '18 at 01:02
3

If you are looking for syntax highlighting in an in-browser editor, try CodeMirror.

rplevy
  • 5,393
  • 3
  • 32
  • 31
2

SyntaxHighlighter

Franci Penov
  • 74,861
  • 18
  • 132
  • 169
2

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
  • 7,467
  • 6
  • 34
  • 41