9 Useful Javascript Syntax Highlighting Scripts

Syntax highlighting is very important especially when we want to show our code example on the blog. By enabling the syntax highlighting on the blog, readers can read the code blocks easier.

There are a lot of free and useful syntax highlighting scripts around us. Most of the scripts are written using Javascripts, though some of them are powered by other programming languages such as Phyton or Ruby.

Today, we are going to look into 9 Syntax Highlighting Scripts that powered by Javascript.

1. SyntaxHighlighter

I believe this is the most common syntax highlighting script used by most of us. It supports a lot of different languages and you can easily create new “brush” for your language if it is not supported by default. Check out the custom brushes list compiled by Abel Braaksma.
syntax-highlighter

2. SHJS

SHJS stands for Syntax Highlighting in Javascript. It uses language definations from GNU Source-highlight and support a lot of different programming languages. SHJS has been tested and support major browsers sych as Firefox 2 and 3, IE 6 and 7, Opera 9.6, Safari 3.2 and Chrome 1.0.
shjs

3. beautyOfCode

beautyOfCode is a jQuery plugin for syntax highlighting. It uses the SyntaxHighlighter scripts by Alex Gorbatchev and makes it more XHTML-compliant.
beauty-of-code

4. Chili

Chili is a jQuery code syntax highlighting plugin. It comes bundled with recipes for a lot of languages and supports many configuration options.
chili

5. Lighter.js

Lighter.js is a free syntax highlighting plugin for MooTools. Using lighter.cs is as simple as adding a single script to your webpage.
lighter-js

6. Highlight.js

highlight.js is easy to use and supports a lot of programming languages. It has some plugins for easily integrations to other CMS, forum or blog.
highlight-js

7. DlHighlight

DlHighlight is a simple syntax highlighting scripts that supports only 4 programming languages: JavaScript, CSS, XML, HTML.

8. Google Code Prettify

Google Code Prettify a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. It is the scripts wich powers code.google.com.
google-code-prettify

9. JUSH

JUSH is yet another jQuery syntax highlighting plugin which supports different programming languages such as HTML, CSS, PHP, PY and SQL.
jush

http://www.philsbury.co.uk Phil

Awesome, was looking a various ones of these the other day! Glad it’s now in one place

bane coat for sale

It is a great and also beneficial part of data. I am just thankful that you discussed this helpful tips with us and intensely thrilled to notice the content,I will be quite definitely to just like and also trust the mindset.http://www.celebswear.com/products/The-Dark-Knight-Rises-2012-Tom-Hardy-Bane-Coat.html

Pingback: 9 Useful Javascript Syntax Highlighting Scripts | TopRoundups
http://www.gigglecomputer.com Phaoloo

Awesome scripts
Pingback: 9款有用的Javascript代码高亮脚本| Ajax| 前端观察
http://novatvmedia.com Ezrad Lionel

I would love a better breakdown. I understand most support multiple languages or templates, use js for formatting.. i always thought it was some kind of clever css li hack.

Size, performance, issues, compatibility, etc, would be lovely as well. Can I assume fromt he list that syntax highlighter is the best, the first, or the more prevalent?

http://www.webdesignbooth.com dicky

Yeah. I myself prefer SyntaxHighlighter than others. But i want to list out all available alternatives so that readers are aware of them.

Pingback: Sin tiempo para escribir.11, Carrero
Pingback: 9 Useful Javascript Syntax Highlighting Scripts | Design Newz
Pingback: CSS Brigit | 9 Useful Javascript Syntax Highlighting Scripts
Pingback: links for 2009-07-10 .:: [aka щямукюшт] Ozver.in | Озверин
Pingback: 今週の管理人Bookmark (7/5-7/12) - ElectronicBrain is eating BreakFast
Pingback: links for 2009-07-12 « 個人的な雑記
Pingback: 網站製作學習誌 » [Web] 連結分享
Pingback: 9 Useful Javascript Syntax Highlighting Scripts | Pdf Search colection
http://hdragomir.com Horia Dragomir

I’ve always gone with Google’s Prettify, but that Chili is looking pretty sexy!

Thank you for this list!
http://www.undermyhat.org Abel Braaksma

Perhaps it’s useful to point out links to where to find the lexers / syntax scripts of the highlighters. Because of the potential heavyweight, not all languages are included by default.

In the case of SyntaxHighlighter (your nr 1 on this list), you can find an overview of the bundled languages on his homepage, but if you look for something else, I compiled a long list of available language scripts that I could find which includes many more then the default 20 (you are of course free to include a link to that list in your review )

http://www.webdesignbooth.com Dicky

Hi Abel,
You have an awesome list! I just update my post to include your list. Thanks for sharing with us!

http://www.undermyhat.org Abel Braaksma

Thanks!

I was wondering why the trackback doesn’t work. I included a reference to your post as well, and somehow assumed the trackback to be in place automatically. It is not terribly important, esp. now that you included me in your post, yet just wondering (probably mistake in my wp config).

Mosumi Akter

great job. I feel great. It could be due to the delicious meal I just
had, or the fact that the temperature in my office is just right, or
because I can finally answer the question dreaded by all graduate
students, “When will y

Pingback: All Syntax Highlighter brushes collected, described and downloadable | Under My Hat
Pingback: Highcharts – Pure Javascript Charts Library | Afif Fattouh - Web Specialist
http://www.dusystem.com 涂聚文

谢谢共享这么好的技术资源，让我们更进一步！
http://ts-creatives.com Deepak kumar

Thanks for sharing with us!
http://techscienceinterest.blogspot.com Brent Coffey

Exactly what I am looking for in my blog. I am wondering if there is a way to bring one of these scripts into Blogo so that it can be easily reused?
Pingback: 9 Useful Javascript Syntax Highlighting Scripts | Listaurus
http://www.oriontransfer.co.nz/ Samuel

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.

http://www.oriontransfer.co.nz/software/jquery-syntax/index
http://matt.might.net/ Matt Might

I wrote a solution from scratch that does syntax-highlighting too, and wrote about the experience on my blog:

http://matt.might.net/articles/lexing-and-syntax-highlighting-in-javascript/

It’s actually not too hard, thanks to built-in regular expression support.
http://www.milcoins.com milcoins

Great stuff, Thank you, I have been looking for these codes for a few weeks, Other sites had them but they were not correct.

Thanks again.
http://www.balupton.com Benjamin “balupton” Lupton

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.

Here’s the link
http://www.balupton.com/projects/jquery-syntaxhighlighter/
Pingback: Gözde Berberoğlu » Günün Derlemeleri / 10 Temmuz 2009
Pingback: tag <code> su altervista - AlterVista | Spazio web gratis, hosting free php mysql
http://javascriptclosewindow.com/ Alex

Good review Dicky. I tried all of them but select
Google Code Prettify. And I like it.
Pingback: Code Colorato - AlterVista | Spazio web gratis, hosting free php mysql
http://jmrware.com ridgerunner

SyntaxHighlighter 3.0.83 has a nasty bug at its core which causes it to get confused and incorrectly colorize the markup. I found the root cause of the bug and wrote about the correct fix here:
http://jmrware.com/articles/2011/sh-bug/SyntaxHighlighterBug.html

The author (Alex) is aware of the problem but has not yet released an official fix. Just thought you might be interested.
Kin Lum

Python has become Phyton in this article…

http://www.freesourcecode-ph.co.cc/ Free source code

It’s all about javascript, men
http://www.freesourcecode-ph.co.cc/ Free source code

It’s all about javascript, men
http://www.freesourcecode-ph.co.cc/ Free source code

It’s all about javascript, men

Pingback: Anonymous
Pingback: Delicious Bookmarks for June 6th from 12:58 to 16:25 « Lâmôlabs
Pingback: 冰点
Pingback: 9 Useful Javascript Syntax Highlighting Scripts | WPsharing
http://topclassifiedsoftware.com ads script

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.
Pingback: 9款有用的Javascript代码高亮脚本 | WEB2.0社区
http://www.dany.us Jasa Pembuatan Web

Nice Code.. thanks for sharing..
justmoveout

Nice information,
appreciation for posting.

Property to rent in croydon
Pingback: 9款有用的Javascript代码高亮脚本 | phpLeaf
http://chivve.com Web Design Oklahoma

I am very enjoyed for this site. Its year informative topic. It help me very much to solve Some Problems. Its so fantastic and Opportunity are working style so speedy

http://www.agentnex.com/ Real Estate Website

Yes this site is really have a great material for us to use in our work on daily basis.

http://goldstarok.com Promotional products

This is a good post. This post gives truly quality information. I’m definitely going to look into it. Really very useful tips are provided here. thank you so much. Keep up the good works…
http://www.weboracle.com.au web design melbourne

this is indeed so helpful to a lot of people! it would be a great help for everyone if they could actually check each block of code in an easy way. thanks for the great share!
Prajesh C8kumash55

use this link to format sql code http://sqlserverlearner.com/online-tools/tsql-code-formatter
http://aokc.net/ Filip Norman

That’s really marvelous to
know about syntax highlighting. I’m
not a web designer but i reckon this topic mentioned view would be helpful for
some of my web designer pal. Therefore I would like to allocate this issue with
them. Thanks mate.
http://www.aspiredesigns.com.sg/ website design firm

Thanks for taking the time to discuss this, I feel strongly about it and
love learning more on this topic. If possible, as you gain expertise,
would you mind updating your blog with more information? It is extremely
helpful for me
WordPress Web Design

Thanks for sharing.I am happy to find so many useful information here in the post, we need develop more strategies in this regard, thanks for sharing.
http://www.balengo.it/ maglia nera

good to use this code in my marble blast online site of better look
Pingback: Script Installation Service
http://custom-writing.org/research-papers writing a research paper

The one posted here works actually pretty well. You could always add some missing elements
Craig Campbell

Just wanted to mention I just released a syntax highlighting tool: http://rainbowco.de
http://myinstantapprovalpaydayloans.com/long-term-payday-loans/ long term payday loans

some highlighter my not work properly. I need some help to modify
Pingback: 9个实用的Javascript代码高亮脚本 | 编程X资讯
Rakibrimon4949

Really nice article and by reading this article i learned somethings.To
know about Fairfield bankruptcy lawyer please visit our site.
Pingback: formatting sourcecode using jQuery | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes
http://www.seorus.com.au/ SEO Melbourne

great information
Chiropractic

I have got many useful information from this blog. Definitely this blog will be a very helpful to the people. Keep providing more information. Here is a site from where one can get some valuable information about Chiropractic and Massage Therapy: Chiropractic
Chiropractic

hi, I read your post and it was amazing , KEEP IT, great job.
key word
Charlie Chen

It was such a great and knowledgeable blog..

ghost rider costume
hormone therapy for women

Good thing i stumbled by this site I was moved and learned
a lot thanks for all the information.hormone therapy for women
http://www.back40design.com/ Jennifer

Great article, Its really a very informative posting indeed. Resources like the one you mentioned here will be very useful to me! I expect more and more article like this from you in the future as well.
relationship pins on pinterest

relationship pins on pinterest

Exciting write up at all! I know which movie or series has a
baby shower that made me dreamed but I missed the competition. Update your next
competition details and this time I will definitely win this. Thanks!
Guest

Your work is deserved to be appreciated hard working efforts done in your blog.Download GTA San Andreas | Download Age of Empires 3 | Download Angry Birds Space | Download Far Cry | free games

9 Useful Javascript Syntax Highlighting Scripts

1. SyntaxHighlighter

2. SHJS

3. beautyOfCode

4. Chili

5. Lighter.js

6. Highlight.js

7. DlHighlight

8. Google Code Prettify

9. JUSH

Search

Sponsors

Pages

Wordpress Themes

9 Useful Javascript Syntax Highlighting Scripts

1. SyntaxHighlighter

2. SHJS

3. beautyOfCode

4. Chili

5. Lighter.js

6. Highlight.js

7. DlHighlight

8. Google Code Prettify

9. JUSH

Search

Sponsors

Subscribe

Pages

Wordpress Themes