Syntax highlighting code with Javascript [closed]

Question

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

(One suggestion per answer please).

Pushover

shjs.sourceforge.net – Ardent

Answer 1

StackOverflow uses the Prettify library.

Milreis

I second this. Google Code uses it for their own repo highlighting (since they wrote it) and automatically detects the language. – Spray

Surely using one which "automatically" detects the language simply puts more weight on the client's machine/browser... – Indefinite

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. – Chook

Just added this to my web site, and it's great and so simple to use! – Gluttony

@Vincent: it improves more than just performance ;-) – Lambert

@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 – Chook

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 – Democritus

For me works just fine. Really easy to implement into the HTML and the result is astonishing. Thanks for the suggestion :) – Ratliff

Is it possible to comment code like Git-hub does? – Medici

This is now archived. – Douglasdouglashome

Answer 2

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.

Ferromagnetic

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). – Silda

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! – Region

Answer 3

SyntaxHighlighter is available as a GitHub project.

Pushover

Answer 4

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.

Paugh

This ended up being the best option of all the answers for me because of the ease of adding new language definitions. – Ocrea

Answer 5

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.

Girt

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! – Tub

Answer 6

How about:

syntaxhighlighter

highlight.js

JSHighlighter

Ishmul

A simply Google search would also give me that list--but which one you prefer and why? – Caruncle

Answer 7

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.

Jollification

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. – Jefferey

Answer 8

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.

Yale

Answer 9

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.

Inconveniency

unfortunately it thought a standard FpML message to be SPAM :) – Millstream

@ehosca, are you able to give me some clarification on problem you are having? – Inconveniency

when i paste the xml in goo.gl/PPcDx to goo.gl/qSqm9 it says Invalid content, appears to be spam. hope this helps. – Millstream

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 (syntax-highlighing.com). – Inconveniency

Answer 10

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].)

Indefinite

It's not obvious to me. Why is using a backend highlighter better? – Thievery

Yeah, I, too, would really love to know what is "obvious" about preferring to send a larger response to the client... – Helvetic

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 :) – Indefinite

What devices don't have JS enabled? – Depraved

Answer 11

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

Monck

Answer 12

SyntaxHighlighter

Untrue

Answer 13

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.

Pushover