Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 99 lines (87 sloc) 3.48 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<title>Code Highlighter 0.2 - A Guide to creating style sets</title>
<script type="text/javascript" src="code_highlighter.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<style type="text/css">
body {
background : #EEE;
font-family: Arial, Helvetica, sans-serif;
margin : 3em 5em;
line-height : 1.5;
font-size: 80%;
pre {
border: 1px solid black;
border-color: #BBB #DDD #DDD #BBB;
margin : 2em;
padding : 1em;
line-height: 1.5;
background: white;
font-size : 1.2em;
overflow: auto;
h1 span {
font-size : 0.5em;
a {
color : gray;
/* end of page css - below is for the code highlighter */
.javascript .comment {
color : green;
.javascript .string {
color : teal;
.javascript .keywords {
color : navy;
.javascript .global {
color : blue;
.javascript .brackets {
color : navy;
<h1>CodeHighlighter 0.2</h1>
<h2>A guide to creating style sets</h2>
<p>Style sets are written in JavaScript and are used by CodeHighlighter to match specific types of code and wrap them in, normally, a &lt;span&gt; tag with a specified class name. The stylesets themselves have a simple form but you may need to be a bit of a Regular Expressions badboy to create complex rules. Here's the style set for CSS:</p>
<pre class="javascript"><code>CodeHighlighter.addStyle("css", {
comment : {
exp : /\/\*[^*]*\*+([^\/][^*]*\*+)*\//
keywords : {
exp : /@\w[\w\s]*/
selectors : {
exp : "([\\w-:\\[.#][^{};>]*)(?={)"
properties : {
exp : "([\\w-]+)(?=\\s*:)"
units : {
exp : /([0-9])(em|en|px|%|pt)\b/,
replacement : "$1&lt;span class=\"$0\"&gt;$2&lt;/span&gt;"
urls : {
exp : /url\([^\)]*\)/
<p>Use the CodeHighlighter.addStyle() method to add the style set rules. First define the class name that will trigger the style set, in this case 'css'. Any &lt;pre&gt; tag with the class "css" will use this style set.</p>
<p>The second argument to the method is an object containing the rules. Here's how a single rule goes together:</p>
<pre class="javascript"><code>...
classname : {
exp : /a regexp/, // or a reg exp as a string
replacement : "$1&lt;span class=\"$0\"&gt;$2&lt;/span&gt;" // optional advanced replacement
<p>The property name is the class that will be applied to the matched text. The value of each property is another object containing the property <strong>exp</strong> which is mandatory and contains the RegExp (either in RegExp notation or as a string) required to match the text and a property <strong>replacement</strong> which is optional and only used for advanced replaces.</p>
<p>A simple replace (where no replacement property is specified) will simply wrap all of the matched text in a span tag if you need more control you can specify your own replacement rule using the replacement property. $0 will always output the class name while $1-$9 will match sub expressions in the regular way.</p>
<p><strong>Note:</strong> If you want to use look aheads in your regular expressions go ahead but write them as a string. This prevents older browsers that do not support lookaheads from sprouting JavaScript errors.</p>
<p><a href="/">Return to the examples page</a></p>