Syntax highlighting code with Javascript [closed]

问题

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 6 years ago.

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

(One suggestion per answer please).

回答1:

StackOverflow uses the Prettify library.

回答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.

回答3:

SyntaxHighlighter is available as a GitHub project.

回答4:

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.

回答5:

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.

回答6:

How about:

syntaxhighlighter

highlight.js

JSHighlighter

回答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.

回答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.

回答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.

回答10:

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

回答11:

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

回答12:

SyntaxHighlighter

回答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.

来源：https://stackoverflow.com/questions/160694/syntax-highlighting-code-with-javascript