Notepad++ Style Syntax Highligting Plugin with jQuery - Code Highlighter

Code Highlighter is a jQuery plugin that offers syntax highlighting of source code (Html, PHP, CSS and JavaScript) in the webpage, as you seen in Notepad++.

How to use it:

1. The Code Highlighter requires jQuery library to be loaded in your webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. Load the Code Highlighter's JavaScript and CSS in the webpage.

<link href="CodeHighlighter.css" rel="stylesheet">
<script src="CodeHighlighter.js"></script>

3. Wrap your code snippets into a code tag with the corresponding CSS class.

<code class="html">
...
</code>

<code class="css">
...
</code>

<code class="js">
...
</code>

<code class="php">
...
</code>

4. Call the function on the code tags to enable the code highlighter.

$(document).ready(function() {

  $('.html').highlightCode('html');
  $('.css').highlightCode('css');
  $('.js').highlightCode('js');
  $('.php').highlightCode('php');

});

---

This awesome jQuery plugin is developed by LBBO. For more Advanced Usages, please check the demo page or visit the official website.