9 Useful Javascript Syntax Highlighting Scripts

Jul 8th, 09 by Dicky | View Comments |
Stumble |
Delicious
You maybe interested in our latest article Personal Facebook Fan Pages of Celebrities.

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

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

Tags: , ,
Under: Javascript, Resources
We regularly update articles about resources, tutorials and Wordpress to help designers and developers. If you are new to WebDesignBooth, why not subscribe to our RSS feed and get the latest updates immediately. You can also subscribe through email or follow us on Twitter.

Related Posts

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

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

  • http://toproundups.com/2009/07/08/9-useful-javascript-syntax-highlighting-scripts/ 9 Useful Javascript Syntax Highlighting Scripts | TopRoundups

    [...] 9 Useful Javascript Syntax Highlighting Scripts Submitted by Webmasterish [...]

  • http://www.gigglecomputer.com Phaoloo

    Awesome scripts :)

  • http://www.qianduan.net/9-useful-javascript-syntax-highlighting-scripts.html 9款有用的Javascript代码高亮脚本| Ajax| 前端观察

    [...] Resource , 发表评论 » 原文：9款有用的Javascript代码高亮脚本 译自：9款有用的Javascript代码高亮脚本 [...]

  • 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://carrero.es/sin-tiempo-para-escribir-11/3583 Sin tiempo para escribir.11, Carrero

    [...] 9 scripts útiles para destacar la sintasis de código con javascript. En inglés. vía: WebDesignBooth [...]

  • http://design-newz.com/2009/07/09/9-useful-javascript-syntax-highlighting-scripts/ 9 Useful Javascript Syntax Highlighting Scripts | Design Newz

    [...] 9 Useful Javascript Syntax Highlighting Scripts [...]

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

  • http://cssbrigit.com/CNews/entrada/2009070817420252 CSS Brigit | 9 Useful Javascript Syntax Highlighting Scripts

    9 Useful Javascript Syntax Highlighting Scripts…

    Syntax highlighting is very important especially you run a tutorial blog that has a lot of code examples. Proper highlighting your code will make your readers read your code easily….

  • http://ozver.in/2009/07/11/links-for-2009-07-10/ links for 2009-07-10 .:: [aka щямукюшт] Ozver.in | Озверин

    [...] 9 Useful Javascript Syntax Highlighting Scripts (tags: javascript highlighter syntax highlight scripts js wordpress jquery webdesign syntaxhighlighter text) [...]

  • http://www.multiburst.net/ElectricBrain/2009/07/bookmarks-of-20090712 今週の管理人Bookmark (7/5-7/12) – ElectronicBrain is eating BreakFast

    [...] 9 Useful Javascript Syntax Highlighting Scripts [...]

  • http://yoshy.wordpress.com/2009/07/13/links-for-2009-07-12/ links for 2009-07-12 « 個人的な雑記

    [...] 9 Useful Javascript Syntax Highlighting Scripts (tags: javascript highlight) [...]

  • http://www.jaceju.net/blog/?p=608 網站製作學習誌 » [Web] 連結分享

    [...] 9 Useful Javascript Syntax Highlighting Scripts [...]

  • http://blog.pdf-search.org/2009/07/9-useful-javascript-syntax-highlighting-scripts/ 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).

  • http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/ All Syntax Highlighter brushes collected, described and downloadable | Under My Hat

    [...] 9 useful js highlighters [...]

  • http://www.afiffattouh.com/web-design/highcharts-%e2%80%93-pure-javascript-charts-library Highcharts – Pure Javascript Charts Library | Afif Fattouh – Web Specialist

    [...] 9 Useful Javascript Syntax Highlighting Scripts [...]

  • 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?

  • http://www.listaurus.com/890/9-useful-javascript-syntax-highlighting-scripts/ 9 Useful Javascript Syntax Highlighting Scripts | Listaurus

    [...] Read more… [...]

  • 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/

  • http://www.gozdeberberoglu.com/2009/07/10/gunun-derlemeleri-10-temmuz-2009/ Gözde Berberoğlu » Günün Derlemeleri / 10 Temmuz 2009

    [...] belirginleştirme (syntax highlighter) scriptleri Link jQuery medya oynatıcı Link Açılan perde scripti Link Adsense’i daha iyi verimli kullanın [...]

  • http://forum.it.altervista.org/basi-per-siti-web/111308-tag-code-su-altervista.html#post753668 tag <code> su altervista – AlterVista | Spazio web gratis, hosting free php mysql

    [...] qualcuno di questi script e vedi cosa preferisci: http://www.webdesignbooth.com/9-usef…hting-scripts/ __________________ chezDreadnaut – dailyDreadnaut Fantacalcio? Che noia! Si apre la nuova [...]

  • http://javascriptclosewindow.com/ Alex

    Good review Dicky. I tried all of them but select
    Google Code Prettify. And I like it.

  • http://forum.it.altervista.org/php-mysql-e-apache-htaccess/124651-code-colorato.html#post787759 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://forum.ceviz.net/php/105509-bir-script-hazirliyorum-cogu-bitti-oneri-gorusler-ve-yardim-2.html#post635605 Anonymous

    [...] [...]

  • http://www.lamolabs.org/blog/6238/delicious-bookmarks-for-june-6th-from-1258-to-1625/ Delicious Bookmarks for June 6th from 12:58 to 16:25 « Lâmôlabs

    [...] 9 Useful Javascript Syntax Highlighting Scripts – June 6th ( tags: syntax highlighting highlighter coding javascript code programming tools ) June 6th, 2011, @ 3:00 pm | Tags: links | Category: delicious links | Comments are closed | Trackback this Post | 0 views [...]

  • 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

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

  • http://www.dany.us Jasa Pembuatan Web

    Nice Code.. thanks for sharing..

  • justmoveout

    Nice information,
    appreciation for posting.
     
    Property to rent in croydon

  • 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://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
  • 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.

blog comments powered by Disqus