Code Syntax Highlighter - VM UI Framework

Overview

The syntax highlighter will convert any <pre> elements into highlighted source code and covers 10 popular programming languages. The plugin is a modified version of Jose Prado's Lighter MooTools Plugin.

Usage

The plugin works automatically with all <pre> and supports HTML, CSS, Java, JavaScript, PHP, Python, Ruby, Markdown, Shell, and SQL. To specify a particular language, just add the language name as the CSS class for the <pre> element. Omitting any class altogether will result in just the code and line numbers being rendered, without any highlighting.

Note When creating a code snippet for JavaScript, use the class js rather than javascript.

When creating code snippets for HTML, be sure to use HTML entities for characters like < and > in order to have them display properly. Also, any whitespace is automatically detected and rendered, so start any <pre> element content fully justified to the left of your code.

Demo

<!-- An example of how to use Lighter for HTML -->
<pre class="html">
&lt;p&gt;Hello World&lt;/p&gt;
</pre>

Code Syntax Highlighting

Overview

Usage

Demo

Want to continue the tour?