code-highlighter/stylesetguide.html at master · danwrong/code-highlighter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<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;
	}
	</style>
</head>

<body>
<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\([^\)]*\)/
	}
 });</code></pre>
 <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
},
...</code></pre>
 <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>
</body>
</html>