Home » Resources » JavaScript » 16 Javascript Syntax Highlighting Scripts

16 Javascript Syntax Highlighting Scripts

advertisement

Share This

Syntax highlighting is a feature of some text editors that display text—especially source code—in different colors and fonts according to the category of terms.Beautiful code becomes even more beautiful when syntax highlighted. If you are posting some codes in your blog, syntax highlighting will make your readers go through the code and understand it easily.

Quite simply, syntax highlighting colorizes your code based on pre-defined keywords. There are a lot for Syntax Highlighting tools out there and you might be wondering which one to use for your blog. In this article we will look into some pretty and useful Syntax Highlighters which uses JavaScript to highlight the syntax of the code which is being posted in your blog.

  1. SyntaxHighlighter: Syntax Highlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server. Also this, I think, is the most used Syntax highlighter through out the web.
    syntaxhighlighter
  2. JavaScript Syntax Highlighting Engine : This project is an extensive JavaScript-based syntax highlighting engine and currently supports JavaScript, CSS, XML and HTML.
    JavaScript Syntax Highlighting Engine
  3. SHJS – Syntax Highlighting in JavaScript : SHJS is a JavaScript program which highlights source code passages in HTML documents. Documents using SHJS are highlighted on the client side by the web browser. SHJS uses language definitions from GNU Source-highlight.
    SHJS - Syntax Highlighting in JavaScript
  4. beautyOfCode: jQuery Plugin for Syntax Highlighting: In order to enable SyntaxHighlighter XHTML compliant, a small part is rewritten, and made a small jQuery-Plugin that just uses Alex’s scripts right away. Using beautyOfCode you don’t have to decorate your html in order to enable syntax highlighting. Just call beautifyCode on any selected pre or textarea.
    beautyOfCode
  5. Chili 2.2: Chili is a jQuery code syntax highlighting plug-in. It comes bundled with recipes for a lot of languages and supports many configuration options. This is Very fast highlighting, trivial setup, fully customizable, thoroughly documented, and MIT licensed.
    chili
  6. Lighter.js – Syntax highlighting for MooTools: Lighter.js is a free syntax highlighting class developed with MooTools. It was created with the MooTools developer in mind and takes advantage of many of the Framework’s features. Using it can be as simple as adding a single script to your web page, selecting the elements you wish to highlight, and Lighter.js takes care of the rest.
    Lighter
  7. Highlight.js: Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
    Highlight
  8. Code Prettify: A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. This works on HTML pages, works even if code contains embedded links, line numbers, etc., have a simple API : include some JS&CSS and add an onload handler. The tools is small download and does not block page from loading while running and have customizable styles via CSS.
    Code Prettify
  9. JUSH – JavaScript Syntax Highlighter: JavaScript Syntax Highlighter can be used for client-side syntax highlighting of following languages: htm, css, js, php, py and sql.To colorize the syntax highlighted code, you will need to a style, for example jush.css.
    JUSH
  10. Syntax Highlight JavaScript Code Using Regular Expression : Syntax highlight source code can greatly improve the readability when you post your source code on web page. We can highlight the syntax of JavaScript code on web page using javascript regular expression.
    Syntax Highlight
  11. Syntax highlighting JavaScript : This project is an extensive JavaScript-based syntax highlighting engine and currently supports JavaScript, CSS, XML and HTML.
    Syntax highlighting JavaScript
  12. Multiple Language Syntax Highlighting: The source code entirely written in JScript so it can be included server-side or client-side in your web pages. The techniques used are: regular expressions ,XML DOM ,XSL transformation and CSS style.
    Multiple Language Syntax Highlighting
  13. Syntax Highlighter with valid XHTML output : Syntax Highlighter with valid XHTML output.
    Syntax Highlighter with valid XHTML output
  14. JSHighlighter: JSHighlighter is a JavaScript dedicated Syntax Highlighter. Maybe one day I’ll modify JSHighLighter to parse different languages. JSHighlighter requires JSL and then is compatible with all JavaScript 1.2 browser, starting from IE4.
    JSHighlighter
  15. NeatHighlighter : The only highlighter which highlights mixture of PHP, Javascript, CSS & HTML code.
    NeatHighlighter
  16. GeSHi – Generic Syntax Highlighter: GeSHi started as an idea to create a generic syntax highlighter for the phpBB forum system, but has been generalised to this project.GeSHi supports PHP5 and Windows, and has even been used to highlight code on ASP pages. Many customisable features of GeSHi facilitate speed increases, and you can easily find a balance between the amount of highlighting done and the speed in which it is done.
    GeSHi

If you think I have missed some of the best Syntax Highlighters, please feel free to let me know about that. I will include them in the list as ASAP.

About The Author

Working as a Software Developer for the last 10+ years, posting about whatever I find useful and interesting... This is all fun...

Number of Entries : 170

Comments (6)

Leave a Comment


five + = 6

© 2012 - www.techflaps.com | Powered By Wordpress

Scroll to top