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

shjs.sourceforge.net

Firoz Khan
– Firoz Khan

2015-05-06 12:09:41 +00:00
Commented May 6, 2015 at 12:09 — Firoz Khan
– Firoz Khan, Commented May 6, 2015 at 12:09

Demitri · Accepted Answer · 2015-08-11 18:37:00Z

103

StackOverflow uses the Prettify library.

edited Aug 11, 2015 at 18:37

Demitri

14.2k4 gold badges44 silver badges43 bronze badges

answered Oct 2, 2008 at 3:08

AaronSieb

8,2768 gold badges42 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Karan Over a year ago

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

James Over a year ago

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

Vincent Robert Over a year ago

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.

Cornelius Dol Over a year ago

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

SamB Over a year ago

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

|

Craig · Accepted Answer · 2012-03-30 13:04:49Z

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.

answered Mar 30, 2012 at 13:04

Craig

2,71427 silver badges20 bronze badges

2 Comments

Roger_S Over a year ago

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

Blender Over a year ago

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!

Mike Pennington · Accepted Answer · 2011-12-24 22:02:36Z

26

SyntaxHighlighter is available as a GitHub project.

edited Dec 24, 2011 at 22:02

Mike Pennington

43.2k22 gold badges140 silver badges191 bronze badges

answered Oct 2, 2008 at 2:58

mlambie

7,4976 gold badges37 silver badges41 bronze badges

Comments

Ilya Tuvschev · Accepted Answer · 2012-11-21 07:44:31Z

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.

answered Nov 21, 2012 at 7:44

Ilya Tuvschev

1611 silver badge2 bronze badges

1 Comment

Mike Grace Over a year ago

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

Mike Pennington · Accepted Answer · 2011-12-24 22:04:30Z

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.

edited Dec 24, 2011 at 22:04

Mike Pennington

43.2k22 gold badges140 silver badges191 bronze badges

answered Jul 29, 2010 at 3:59

balupton

49.1k32 gold badges136 silver badges185 bronze badges

1 Comment

Tieson T. Over a year ago

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!

Chris Pietschmann · Accepted Answer · 2008-10-02 02:59:57Z

5

How about:

syntaxhighlighter

highlight.js

JSHighlighter

answered Oct 2, 2008 at 2:59

Chris Pietschmann

29.9k36 gold badges124 silver badges167 bronze badges

1 Comment

viam0Zah Over a year ago

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

Edu Felipe · Accepted Answer · 2008-10-02 03:23:44Z

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.

answered Oct 2, 2008 at 3:23

Edu Felipe

10.4k13 gold badges47 silver badges41 bronze badges

1 Comment

Nathan Osman Over a year ago

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.

Andrew Hedges · Accepted Answer · 2008-10-02 03:52:21Z

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.

answered Oct 2, 2008 at 3:52

Andrew Hedges

21.9k16 gold badges71 silver badges79 bronze badges

Comments

ioquatix · Accepted Answer · 2011-02-03 05:32:47Z

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.

edited Feb 3, 2011 at 5:32

answered Mar 15, 2010 at 8:48

ioquatix

1,50617 silver badges34 bronze badges

4 Comments

ehosca Over a year ago

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

ioquatix Over a year ago

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

ehosca Over a year ago

when i paste the xml in dl.dropbox.com/u/42313/fpml.xml to syntax-highlighting.com/p/index it says Invalid content, appears to be spam. hope this helps.

ioquatix Over a year ago

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

rplevy · Accepted Answer · 2011-12-24 22:48:21Z

3

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

answered Dec 24, 2011 at 22:48

rplevy

5,4713 gold badges34 silver badges32 bronze badges

Comments

Roger_S · Accepted Answer · 2012-06-09 02:54:50Z

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

edited Jun 9, 2012 at 2:54

Roger_S

5291 gold badge4 silver badges19 bronze badges

answered Oct 2, 2008 at 8:39

James

112k32 gold badges165 silver badges177 bronze badges

4 Comments

Evan P. Over a year ago

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

ZenMaster Over a year ago

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

James Over a year ago

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

Jack G Over a year ago

What devices don't have JS enabled?

Franci Penov · Accepted Answer · 2008-10-02 02:59:43Z

2

SyntaxHighlighter

answered Oct 2, 2008 at 2:59

Franci Penov

76.1k18 gold badges136 silver badges172 bronze badges

Comments

mlambie · Accepted Answer · 2009-05-05 03:50:42Z

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.

answered May 5, 2009 at 3:50

mlambie

7,4976 gold badges37 silver badges41 bronze badges

Collectives™ on Stack Overflow

Syntax highlighting code with Javascript [closed]

13 Answers 13

10 Comments

2 Comments

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

4 Comments

Comments

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

10 Comments

2 Comments

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

4 Comments

Comments

4 Comments

Comments

Comments

Linked

Related