6 Javascript Syntax Highlighting Plugins

Written by Kevin Liew on 19 Mar 2012
25,321 Views • Javascript

Introduction

Syntax highlighting is an important feature for all the code editors. It's certainly a must have feature to increase readability and ease the debugging process but assigning different colors to code syntaxes. If you're running websites that share codes or tutorials, you need to make sure you have a good syntax highlighting plugin installed for your readers. It's essential to present your code in a "visually pleasant manner" to encourage further discussion and implementation of your code.

I have been using SyntaxHighlighter in Queness, and Snippet in favbulous, you can check out this CSS4 post. Personally, I find that the visual of SyntaxHighlighter is a bit messy and Snippet is clean and minimal.

  • SnippetSnippetSnippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.
  • Google PrettifyGoogle PrettifyA Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.
  • Hightlight.jsHightlight.jsHighlight.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.
  • SHJSSHJSSHJS 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.
  • Chilli JSChilli JSVery fast highlighting, trivial setup, fully customizable, thoroughly documented, and MIT licensed.
  • SyntaxHighlighterSyntaxHighlighterSyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.