9 Useful Javascript Syntax Highlighting Scripts

Jul 8th, 09 by Dicky | 22 Comments |
Delicious 183 hits
You maybe interested in our latest article 75 Beautiful Valentine Wallpapers.

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

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.

Comments

  1. Phil says:

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

  2. Phaoloo says:

    Awesome scripts :)

  3. Ezrad Lionel says:

    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?

    • dicky says:

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

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

    Thank you for this list!

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

    • Dicky says:

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

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

  6. 涂聚文 says:

    谢谢共享这么好的技术资源,让我们更进一步!

  7. Deepak kumar says:

    Thanks for sharing with us!

Leave a Comment