├── README
├── applescript.js
├── code_highlighter.js
├── css.js
├── html.js
├── index.html
├── javascript.js
├── python.js
├── ruby.js
├── stylesetguide.html
└── test.html


/README:
--------------------------------------------------------------------------------
 1 | CodeHighlighter 0.4 by Dan Webb
 2 | -------------------------------
 3 | 
 4 | CodeHighlighter is a lightweight, unobstrusive and fully configurable script for displaying code examples highlighted in a way similar to the way many text editors highlight code. It weighs in at just under 4K, allows users to configure their own style sets so that you can highlight any language you like and is deployable simply by attaching it to a page with the script tag and adding class names as hooks. It should also play nicely with any other scripts on your page as it has a tiny footprint on the global namespace.
 5 | 
 6 | Many thanks to Dean Edwards who's star-light behaviour inspired this.
 7 | Deploying the script
 8 | 
 9 |    1. Add a <script> tag for CodeHighlighter.js and a script tag for each of the code types you want to highlight on your page. At this time there are only very basic style sets for JavaScript, CSS and HTML. But it's easy to make your own for any language you like if you know regular expressions. Let me know if you do and I'll link to them.
10 |    2. Add an appropriate class to each <code> element that contains code. 'javascript', 'ruby', 'css' or 'html' will do the trick.
11 |    3. Define CSS styles for each code element, the script simply parses the code and wraps a <span> tag around each element with the appropriate class name. You just need to write CSS to style the code the way you want. No programming or weirdness required. See the source of this code as an example.
12 | 
13 | Testing
14 | 
15 | Known to work on:
16 | 
17 |     * IE 5.5+ PC
18 |     * Firefox 1.0/Mozilla 1.3 + PC
19 |     * Opera 7.23 + PC
20 |     * Netscape 7.2 PC
21 | 
22 | Known to degrade well on:
23 | 
24 |     * IE 5.0 PC
25 |     * Safari Mac (Until it supports functions in String#replace())
26 | 
27 | Any other feedback for any other browser would be greatly apprieciated. Please email Dan Webb at dan[at]danwebb[dot]net. Have a look through the small examples below.
28 | Creating your own style sets for other languages
29 | 
30 | Have a look at this guide to creating style sets.
31 | 
32 | Contributors
33 | ------------
34 | 
35 | Python and AppleScript highlighters by Travis Cripps (http://trav.is)
36 | 
37 | 
38 | LICENSE
39 | --------------
40 | 
41 | Copyright (c) 2010 Dan Webb
42 | 
43 | Permission is hereby granted, free of charge, to any person obtaining a copy
44 | of this software and associated documentation files (the "Software"), to deal
45 | in the Software without restriction, including without limitation the rights
46 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
47 | copies of the Software, and to permit persons to whom the Software is
48 | furnished to do so, subject to the following conditions:
49 | 
50 | The above copyright notice and this permission notice shall be included in
51 | all copies or substantial portions of the Software.
52 | 
53 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
54 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
55 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
56 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
57 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
58 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
59 | THE SOFTWARE.


--------------------------------------------------------------------------------
/applescript.js:
--------------------------------------------------------------------------------
 1 | CodeHighlighter.addStyle("applescript",{
 2 | 	comment : {
 3 | 		exp  : /--[^\n]+|#![^\n]+/
 4 | 	},
 5 | 	brackets : {
 6 | 		exp  : /\(|\)/
 7 | 	},
 8 | 	string : {
 9 | 		exp  : /"[^"\\]*(\\.[^"\\]*)*"/
10 | 	},
11 | 	keywords : {
12 | 		exp  : /\b(about|above|after|against|and|apart[\s]+from|around|as|aside[\s]+from|at|back|before|beginning|behind|below|beneath|beside|between|but|by|considering|contain|contains|contains|continue|copy|div|does|eighth|else|end|equal|equals|error|every|exit|false|fifth|first|for|fourth|from|front|get|given|global|if|ignoring|in|instead[\s]+of|into|is|it|its|last|local|me|middle|mod|my|ninth|not|of|on|onto|or|out[\s]+of|over|prop|property|put|ref|reference|repeat|return|returning|script|second|set|seventh|since|sixth|some|tell|tenth|that|the|then|third|through|thru|timeout|times|to|transaction|true|try|until|where|while|whose|with|without)\b/
13 | 	},
14 | 	global : {
15 | 		exp : /\b(AppleScript('s)?|current[\s]+application|missing[\s]+value|false|pi|true|version)\b/
16 | 	}
17 | });


--------------------------------------------------------------------------------
/code_highlighter.js:
--------------------------------------------------------------------------------
  1 | /* Unobtrustive Code Highlighter By Dan Webb 11/2005
  2 |    Version: 0.4
  3 | 	
  4 | 	Usage:
  5 | 		Add a script tag for this script and any stylesets you need to use
  6 | 		to the page in question, add correct class names to CODE elements, 
  7 | 		define CSS styles for elements. That's it! 
  8 | 	
  9 | 	Known to work on:
 10 | 		IE 5.5+ PC
 11 | 		Firefox/Mozilla PC/Mac
 12 | 		Opera 7.23 + PC
 13 | 		Safari 2
 14 | 		
 15 | 	Known to degrade gracefully on:
 16 | 		IE5.0 PC
 17 | 	
 18 | 	Note: IE5.0 fails due to the use of lookahead in some stylesets.  To avoid script errors
 19 | 	in older browsers use expressions that use lookahead in string format when defining stylesets.
 20 | 	
 21 | 	This script is inspired by star-light by entirely cunning Dean Edwards
 22 | 	http://dean.edwards.name/star-light/.  
 23 | */
 24 | 
 25 | // replace callback support for safari.
 26 | if ("a".replace(/a/, function() {return "b"}) != "b") (function(){
 27 |   var default_replace = String.prototype.replace;
 28 |   String.prototype.replace = function(search,replace){
 29 | 	// replace is not function
 30 | 	if(typeof replace != "function"){
 31 | 		return default_replace.apply(this,arguments)
 32 | 	}
 33 | 	var str = "" + this;
 34 | 	var callback = replace;
 35 | 	// search string is not RegExp
 36 | 	if(!(search instanceof RegExp)){
 37 | 		var idx = str.indexOf(search);
 38 | 		return (
 39 | 			idx == -1 ? str :
 40 | 			default_replace.apply(str,[search,callback(search, idx, str)])
 41 | 		)
 42 | 	}
 43 | 	var reg = search;
 44 | 	var result = [];
 45 | 	var lastidx = reg.lastIndex;
 46 | 	var re;
 47 | 	while((re = reg.exec(str)) != null){
 48 | 		var idx  = re.index;
 49 | 		var args = re.concat(idx, str);
 50 | 		result.push(
 51 | 			str.slice(lastidx,idx),
 52 | 			callback.apply(null,args).toString()
 53 | 		);
 54 | 		if(!reg.global){
 55 | 			lastidx += RegExp.lastMatch.length;
 56 | 			break
 57 | 		}else{
 58 | 			lastidx = reg.lastIndex;
 59 | 		}
 60 | 	}
 61 | 	result.push(str.slice(lastidx));
 62 | 	return result.join("")
 63 |   }
 64 | })();
 65 | 
 66 | var CodeHighlighter = { styleSets : new Array };
 67 | 
 68 | CodeHighlighter.addStyle = function(name, rules) {
 69 | 	// using push test to disallow older browsers from adding styleSets
 70 | 	if ([].push) this.styleSets.push({
 71 | 		name : name, 
 72 | 		rules : rules,
 73 | 		ignoreCase : arguments[2] || false
 74 | 	})
 75 | 	
 76 | 	function setEvent() {
 77 | 		// set highlighter to run on load (use LowPro if present)
 78 | 		if (typeof Event != 'undefined' && typeof Event.onReady == 'function') 
 79 | 		  return Event.onReady(CodeHighlighter.init.bind(CodeHighlighter));
 80 | 		
 81 | 		var old = window.onload;
 82 | 		
 83 | 		if (typeof window.onload != 'function') {
 84 | 			window.onload = function() { CodeHighlighter.init() };
 85 | 		} else {
 86 | 			window.onload = function() {
 87 | 				old();
 88 | 				CodeHighlighter.init();
 89 | 			}
 90 | 		}
 91 | 	}
 92 | 	
 93 | 	// only set the event when the first style is added
 94 | 	if (this.styleSets.length==1) setEvent();
 95 | }
 96 | 
 97 | CodeHighlighter.init = function() {
 98 | 	if (!document.getElementsByTagName) return; 
 99 | 	if ("a".replace(/a/, function() {return "b"}) != "b") return; // throw out Safari versions that don't support replace function
100 | 	// throw out older browsers
101 | 	
102 | 	var codeEls = document.getElementsByTagName("CODE");
103 | 	// collect array of all pre elements
104 | 	codeEls.filter = function(f) {
105 | 		var a =  new Array;
106 | 		for (var i = 0; i < this.length; i++) if (f(this[i])) a[a.length] = this[i];
107 | 		return a;
108 | 	} 
109 | 	
110 | 	var rules = new Array;
111 | 	rules.toString = function() {
112 | 		// joins regexes into one big parallel regex
113 | 		var exps = new Array;
114 | 		for (var i = 0; i < this.length; i++) exps.push(this[i].exp);
115 | 		return exps.join("|");
116 | 	}
117 | 	
118 | 	function addRule(className, rule) {
119 | 		// add a replace rule
120 | 		var exp = (typeof rule.exp != "string")?String(rule.exp).substr(1, String(rule.exp).length-2):rule.exp;
121 | 		// converts regex rules to strings and chops of the slashes
122 | 		rules.push({
123 | 			className : className,
124 | 			exp : "(" + exp + ")",
125 | 			length : (exp.match(/(^|[^\\])\([^?]/g) || "").length + 1, // number of subexps in rule
126 | 			replacement : rule.replacement || null 
127 | 		});
128 | 	}
129 | 	
130 | 	function parse(text, ignoreCase) {
131 | 		// main text parsing and replacement
132 | 		return text.replace(new RegExp(rules, (ignoreCase)?"gi":"g"), function() {
133 | 			var i = 0, j = 1, rule;
134 | 			while (rule = rules[i++]) {
135 | 				if (arguments[j]) {
136 | 					// if no custom replacement defined do the simple replacement
137 | 					if (!rule.replacement) return "<span class=\"" + rule.className + "\">" + arguments[0] + "</span>";
138 | 					else {
139 | 						// replace $0 with the className then do normal replaces
140 | 						var str = rule.replacement.replace("$0", rule.className);
141 | 						for (var k = 1; k <= rule.length - 1; k++) str = str.replace("$" + k, arguments[j + k]);
142 | 						return str;
143 | 					}
144 | 				} else j+= rule.length;
145 | 			}
146 | 		});
147 | 	}
148 | 	
149 | 	function highlightCode(styleSet) {
150 | 		// clear rules array
151 | 		var parsed, clsRx = new RegExp("(\\s|^)" + styleSet.name + "(\\s|$)");
152 | 		rules.length = 0;
153 | 		
154 | 		// get stylable elements by filtering out all code elements without the correct className	
155 | 		var stylableEls = codeEls.filter(function(item) { return clsRx.test(item.className) });
156 | 		
157 | 		// add style rules to parser
158 | 		for (var className in styleSet.rules) addRule(className, styleSet.rules[className]);
159 | 		
160 | 			
161 | 		// replace for all elements
162 | 		for (var i = 0; i < stylableEls.length; i++) {
163 | 			// EVIL hack to fix IE whitespace badness if it's inside a <pre>
164 | 			if (/MSIE/.test(navigator.appVersion) && stylableEls[i].parentNode.nodeName == 'PRE') {
165 | 				stylableEls[i] = stylableEls[i].parentNode;
166 | 				
167 | 				parsed = stylableEls[i].innerHTML.replace(/(<code[^>]*>)([^<]*)<\/code>/i, function() {
168 | 					return arguments[1] + parse(arguments[2], styleSet.ignoreCase) + "</code>"
169 | 				});
170 | 				parsed = parsed.replace(/\n( *)/g, function() { 
171 | 					var spaces = "";
172 | 					for (var i = 0; i < arguments[1].length; i++) spaces+= "&nbsp;";
173 | 					return "\n" + spaces;  
174 | 				});
175 | 				parsed = parsed.replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;");
176 | 				parsed = parsed.replace(/\n(<\/\w+>)?/g, "<br />$1").replace(/<br \/>[\n\r\s]*<br \/>/g, "<p><br></p>");
177 | 				
178 | 			} else parsed = parse(stylableEls[i].innerHTML, styleSet.ignoreCase);
179 | 			
180 | 			stylableEls[i].innerHTML = parsed;
181 | 		}
182 | 	}
183 | 	
184 | 	// run highlighter on all stylesets
185 | 	for (var i=0; i < this.styleSets.length; i++) {
186 | 		highlightCode(this.styleSets[i]);  
187 | 	}
188 | }


--------------------------------------------------------------------------------
/css.js:
--------------------------------------------------------------------------------
 1 | CodeHighlighter.addStyle("css", {
 2 | 	comment : {
 3 | 		exp  : /\/\*[^*]*\*+([^\/][^*]*\*+)*\//
 4 | 	},
 5 | 	keywords : {
 6 | 		exp  : /@\w[\w\s]*/
 7 | 	},
 8 | 	selectors : {
 9 | 		exp  : "([\\w-:\\[.#][^{};>]*)(?={)"
10 | 	},
11 | 	properties : {
12 | 		exp  : "([\\w-]+)(?=\\s*:)"
13 | 	},
14 | 	units : {
15 | 		exp  : /([0-9])(em|en|px|%|pt)\b/,
16 | 		replacement : "$1<span class=\"$0\">$2</span>"
17 | 	},
18 | 	urls : {
19 | 		exp  : /url\([^\)]*\)/
20 | 	}
21 |  });
22 | 


--------------------------------------------------------------------------------
/html.js:
--------------------------------------------------------------------------------
 1 | CodeHighlighter.addStyle("html", {
 2 | 	comment : {
 3 | 		exp: /&lt;!\s*(--([^-]|[\r\n]|-[^-])*--\s*)&gt;/
 4 | 	},
 5 | 	tag : {
 6 | 		exp: /(&lt;\/?)([a-zA-Z]+\s?)/, 
 7 | 		replacement: "$1<span class=\"$0\">$2</span>"
 8 | 	},
 9 | 	string : {
10 | 		exp  : /'[^']*'|"[^"]*"/
11 | 	},
12 | 	attribute : {
13 | 		exp: /\b([a-zA-Z-:]+)(=)/, 
14 | 		replacement: "<span class=\"$0\">$1</span>$2"
15 | 	},
16 | 	doctype : {
17 | 		exp: /&lt;!DOCTYPE([^&]|&[^g]|&g[^t])*&gt;/
18 | 	}
19 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | 
  3 | <html>
  4 | <head>
  5 | 	<title>Code Highlighter 0.4</title>
  6 | 	<script type="text/javascript" src="code_highlighter.js"></script>
  7 | 	<script type="text/javascript" src="javascript.js"></script>
  8 | 	<script type="text/javascript" src="css.js"></script>
  9 | 	<script type="text/javascript" src="html.js"></script>
 10 | 	<script type="text/javascript" src="ruby.js"></script>
 11 | 	<style type="text/css">
 12 | 	body {
 13 | 		background : #EEE;
 14 | 		font-family: Arial, Helvetica, sans-serif;
 15 | 		margin : 3em 5em;
 16 | 		line-height : 1.5;
 17 | 		font-size: 80%;
 18 | 	}
 19 | 
 20 | 	pre {
 21 | 		border: 1px solid black;
 22 | 		border-color: #BBB #DDD #DDD #BBB;
 23 | 		margin : 2em;
 24 | 		padding : 1em;
 25 | 		line-height: 1.5;
 26 | 		background: white;
 27 | 		overflow: auto;
 28 | 	}
 29 | 	
 30 | 	code {
 31 | 		font-size: 1.2em;
 32 | 	}
 33 | 
 34 | 	h1 span {
 35 | 		font-size : 0.5em;
 36 | 	}
 37 | 
 38 | 	a {
 39 | 		color : gray;
 40 | 	}
 41 | 
 42 | 	/* end of page css - below is for the code highlighter */
 43 | 
 44 | 	.javascript .comment, .ruby .comment {
 45 | 		color : green;
 46 | 	}
 47 | 
 48 | 	.javascript .string, .ruby .string {
 49 | 		color : teal;
 50 | 	}
 51 | 
 52 | 	.javascript .keywords, .ruby .keywords {
 53 | 		color : navy;
 54 | 	}
 55 | 
 56 | 	.javascript .global {
 57 | 		color : blue;
 58 | 	}
 59 | 
 60 | 	.javascript .brackets, .ruby .brackets {
 61 | 		color : navy;
 62 | 	}
 63 | 
 64 | 	.css .comment {
 65 | 		color : gray;
 66 | 	}
 67 | 
 68 | 	.css .properties {
 69 | 		color : navy;
 70 | 	}
 71 | 
 72 | 	.css .selectors {
 73 | 		color : maroon;
 74 | 		font-weight : bold;
 75 | 	}
 76 | 
 77 | 	.css .units {
 78 | 		color :red;
 79 | 	}
 80 | 
 81 | 	.css .urls {
 82 | 		color :green;
 83 | 	}
 84 | 
 85 | 	.html .tag {
 86 | 		color : purple;
 87 | 	}
 88 | 
 89 | 	.html .comment {
 90 | 		color : gray;
 91 | 		font-style: italic;
 92 | 	}
 93 | 
 94 | 	.html .string {
 95 | 		color : navy;
 96 | 	}
 97 | 
 98 | 	.html .doctype {
 99 | 		color : teal;
100 | 	}
101 | 	</style>
102 | </head>
103 | 
104 | <body>
105 | <h1>CodeHighlighter 0.4 <span>by <a href="http://www.danwebb.net">Dan Webb</a></span></h1>
106 | <p>CodeHighlighter is a lightweight, unobstrusive and fully configurable script for displaying code examples highlighted in a way similar to the way many text editors highlight code.  It weighs in at just under 4K, allows users to configure their own style sets so that you can highlight any language you like and is deployable simply by attaching it to a page with the script tag and adding class names as hooks.  It should also play nicely with any other scripts on your page as it has a tiny footprint on the global namespace.</p>
107 | <p>Many thanks to <a href="http://dean.edwards.name">Dean Edwards</a> who's star-light behaviour inspired this.</p>
108 | <h3>Deploying the script</h3>
109 | <ol>
110 | 	<li>Add a &lt;script&gt; tag for <a href="CodeHighlighter.js">CodeHighlighter.js</a> and a script tag for each of the code types you want to highlight on your page. At this time there are only very basic style sets for <a href="javascript.js">JavaScript</a>, <a href="css.js">CSS</a> and <a href="html.js">HTML</a>.  But it's easy to make your own for any language you like if you know regular expressions.  Let me know if you do and I'll link to them.</li>
111 | 	<li>Add an appropriate class to each &lt;code&gt; element that contains code. 'javascript', 'ruby', 'css' or 'html' will do the trick.</li>
112 | 	<li>Define CSS styles for each code element, the script simply parses the code and wraps a &lt;span&gt; tag around each element with the appropriate class name.  You just need to write CSS to style the code the way you want.  No programming or weirdness required.  See the source of this code as an example.</li>
113 | </ol>
114 | <h3>Testing</h3>
115 | <p>Known to work on:</p>
116 | <ul>
117 | 	<li>IE 5.5+ PC</li>
118 | 	<li>Firefox 1.0/Mozilla 1.3 + PC</li>
119 | 	<li>Opera 7.23 + PC</li>
120 | 	<li>Netscape 7.2 PC</li>
121 | </ul>
122 | <p>Known to degrade well on:</p>
123 | <ul>
124 | 	<li>IE 5.0 PC</li>
125 | 	<li>Safari Mac (Until it supports functions in String#replace())</li>
126 | </ul>
127 | <p>Any other feedback for any other browser would be greatly apprieciated.  Please email Dan Webb at dan[at]danwebb[dot]net.  Have a look through the small examples below.</p>
128 | <h3>Creating your own style sets for other languages</h3>
129 | <p>Have a look at this <a href="stylesetguide.htm">guide to creating style sets</a>.</p>
130 | <p>Cheers,<br /><strong>Dan</strong></p>
131 | <h2>Inline code</h2>
132 | <p>Hopefully, you should be able to put some code inline like this: <code class="javascript">document.write("bong")</code> and hopefully it should work.</p>
133 | <h2>JavaScript Example</h2>
134 | <pre><code class="javascript">/*
135 | This script detects external links in a page
136 | and attaches a behaviour to them so they open
137 | in a external window.
138 | */
139 | 
140 | function initialiseLinks() {
141 |     if (document.getElementsByTagName) {
142 |         var links = document.getElementsByTagName(&quot;A&quot;);
143 |         for (var i = 0; i &lt; links.length; i++) {
144 |             if (links[i].href.indexOf(&quot;http:&quot;)==0) {
145 |                 // if the links URL starts with http: then we assume it's an external link
146 |                 links[i].onclick = function() {
147 |                     window.open(this.href);
148 |                     return false; // stop normal link behaviour
149 |                 }
150 |             }
151 |         }
152 |     }
153 | }
154 | 
155 | window.onload = initialiseLinks();</code></pre>
156 | <h2>CSS Example</h2>
157 | <pre><code class="css">.javascript  .comment {
158 | 	color : green; /* ffbgffg */
159 | }
160 | 
161 | .javascript  .string {
162 | 	color : maroon;
163 | }
164 | 
165 | .javascript  .keywords {
166 | 	font-weight : bold;
167 | }
168 | 
169 | .javascript  .global {
170 | 	color : blue;
171 | 	font-weight: bolder;
172 | }
173 | 
174 | .javascript  .brackets {
175 | 	color : Gray;
176 | }
177 | 
178 | .javascript  .thing {
179 | 	font-size : 10px;
180 | 	background : url(ghgfhfg gh f.rtjhf);
181 | }</code></pre>
182 | <h2>HTML Example</h2>
183 | <pre><code class="html">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
184 | &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
185 | 	&lt;head&gt;
186 | 		&lt;title&gt;CodeHighlighter example&lt;/title&gt;
187 | 		&lt;!-- This is all you need to do to get CodeHighlighter working --&gt;
188 | 		&lt;script type=&quot;text/javascript&quot; src=&quot;CodeHighlighter.js&quot;&gt; &lt;/script&gt;
189 | 		&lt;script type=&quot;text/javascript&quot; src=&quot;html.js&quot;&gt; &lt;/script&gt;
190 | 	&lt;/head&gt;
191 | 	&lt;body&gt;
192 | 		&lt;p&gt;Put your pre tags here!&lt;/p&gt;
193 | 	&lt;/body&gt;
194 | &lt;/html&gt;</code></pre>
195 | 
196 | <h2>Ruby Example</h2>
197 | <pre><code class="ruby">def login
198 |    if !@params[:key].nil? && @attendee = Attendee.find_by_hashkey(@params[:key])
199 |       # coming in with valid key
200 |       if !@attendee.password_set?
201 |         # no password yet, let them in
202 |         @session[:attendee] = @attendee
203 |         redirect_to :action => 'preferences', :id => @attendee.event.uri
204 |       else
205 |         @event = @attendee.event
206 |       end
207 |     else 
208 |       # if no key we need to know the event
209 |       @event = get_event_by_id_or_uri
210 |     end
211 |     
212 |     if @request.post?
213 |       # posted login details
214 |       if @attendee = Attendee.authenticate(@event, @params[:email], @params[:password])
215 |          @session[:attendee] = @attendee
216 |          redirect_to :action => 'preferences', :id => @event.uri
217 |       else
218 |         flash['notice'] = 'Login unsuccessful.'
219 |       end
220 |     end
221 |     
222 |     if @attendee.nil?
223 |       @email = ''
224 |     else
225 |       @email = @attendee.email
226 |     end
227 |   end</code></pre>
228 | </body>
229 | </html>
230 | 


--------------------------------------------------------------------------------
/javascript.js:
--------------------------------------------------------------------------------
 1 | CodeHighlighter.addStyle("javascript",{
 2 | 	comment : {
 3 | 		exp  : /(\/\/[^\n]*(\n|$))|(\/\*[^*]*\*+([^\/][^*]*\*+)*\/)/
 4 | 	},
 5 | 	brackets : {
 6 | 		exp  : /\(|\)/
 7 | 	},
 8 | 	string : {
 9 | 		exp  : /'[^'\\]*(\\.[^'\\]*)*'|"[^"\\]*(\\.[^"\\]*)*"/
10 | 	},
11 | 	keywords : {
12 | 		exp  : /\b(arguments|break|case|continue|default|delete|do|else|false|for|function|if|in|instanceof|new|null|return|switch|this|true|typeof|var|void|while|with)\b/
13 | 	},
14 | 	global : {
15 | 		exp  : /\b(toString|valueOf|window|element|prototype|constructor|document|escape|unescape|parseInt|parseFloat|setTimeout|clearTimeout|setInterval|clearInterval|NaN|isNaN|Infinity)\b/
16 | 	}
17 | });


--------------------------------------------------------------------------------
/python.js:
--------------------------------------------------------------------------------
 1 | CodeHighlighter.addStyle("python",{
 2 | 	comment : {
 3 | 		exp  : /#[^\n]+/
 4 | 	},
 5 | 	brackets : {
 6 | 		exp  : /\(|\)/
 7 | 	},
 8 | 	string : {
 9 | 		exp  : /'[^'\\]*(\\.[^'\\]*)*'|"[^"\\]*(\\.[^"\\]*)*"|""".*"""/
10 | 	},
11 | 	keywords : {
12 | 		exp  : /\b(and|assert|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|not|or|pass|print|raise|return|try|while|yield|as|None)\b/
13 | 	}
14 | });


--------------------------------------------------------------------------------
/ruby.js:
--------------------------------------------------------------------------------
 1 | CodeHighlighter.addStyle("ruby",{
 2 | 	comment : {
 3 | 		exp  : /#[^\n]+/
 4 | 	},
 5 | 	brackets : {
 6 | 		exp  : /\(|\)/
 7 | 	},
 8 | 	string : {
 9 | 		exp  : /'[^'\\]*(\\.[^'\\]*)*'|"[^"\\]*(\\.[^"\\]*)*"/
10 | 	},
11 | 	keywords : {
12 | 		exp  : /\b(do|end|self|class|def|if|module|yield|then|else|for|until|unless|while|elsif|case|when|break|retry|redo|rescue|require|raise)\b/
13 | 	},
14 | 	/* Added by Shelly Fisher (shelly@agileevolved.com) */
15 | 	symbol : {
16 | 	  exp : /([^:])(:[A-Za-z0-9_!?]+)/
17 | 	}
18 | });


--------------------------------------------------------------------------------
/stylesetguide.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | 
 3 | <html>
 4 | <head>
 5 | 	<title>Code Highlighter 0.2 - A Guide to creating style sets</title>	
 6 | 	<script type="text/javascript" src="code_highlighter.js"></script>
 7 | 	<script type="text/javascript" src="javascript.js"></script>
 8 | 	<style type="text/css">
 9 | 	body {
10 | 		background : #EEE;
11 | 		font-family: Arial, Helvetica, sans-serif;
12 | 		margin : 3em 5em;
13 | 		line-height : 1.5;
14 | 		font-size: 80%;
15 | 	}
16 | 	
17 | 	pre {
18 | 		border: 1px solid black;
19 | 		border-color: #BBB #DDD #DDD #BBB;
20 | 		margin : 2em;
21 | 		padding : 1em;
22 | 		line-height: 1.5;
23 | 		background: white;
24 | 		font-size : 1.2em;
25 | 		overflow: auto;
26 | 	}
27 | 	
28 | 	h1 span {
29 | 		font-size : 0.5em;
30 | 	}
31 | 	
32 | 	a {
33 | 		color : gray;
34 | 	}
35 | 	
36 | 	/* end of page css - below is for the code highlighter */
37 | 	
38 | 	.javascript .comment {
39 | 		color : green;
40 | 	}
41 | 	
42 | 	.javascript .string {
43 | 		color : teal;
44 | 	}
45 | 	
46 | 	.javascript .keywords {
47 | 		color : navy;
48 | 	}
49 | 	
50 | 	.javascript .global {
51 | 		color : blue;
52 | 	}
53 | 	
54 | 	.javascript .brackets {
55 | 		color : navy;
56 | 	}
57 | 	</style>
58 | </head>
59 | 
60 | <body>
61 | <h1>CodeHighlighter 0.2</h1>
62 | <h2>A guide to creating style sets</h2>
63 | <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>
64 | <pre class="javascript"><code>CodeHighlighter.addStyle("css", {
65 | 	comment : {
66 | 		exp  : /\/\*[^*]*\*+([^\/][^*]*\*+)*\//
67 | 	},
68 | 	keywords : {
69 | 		exp  : /@\w[\w\s]*/
70 | 	},
71 | 	selectors : {
72 | 		exp  : "([\\w-:\\[.#][^{};>]*)(?={)"
73 | 	},
74 | 	properties : {
75 | 		exp  : "([\\w-]+)(?=\\s*:)"
76 | 	},
77 | 	units : {
78 | 		exp  : /([0-9])(em|en|px|%|pt)\b/,
79 | 		replacement : "$1&lt;span class=\"$0\"&gt;$2&lt;/span&gt;"
80 | 	},
81 | 	urls : {
82 | 		exp  : /url\([^\)]*\)/
83 | 	}
84 |  });</code></pre>
85 |  <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>
86 |  <p>The second argument to the method is an object containing the rules.  Here's how a single rule goes together:</p>
87 |  <pre class="javascript"><code>...
88 | classname : {
89 | 	exp  : /a regexp/, // or a reg exp as a string
90 | 	replacement : "$1&lt;span class=\"$0\"&gt;$2&lt;/span&gt;" // optional advanced replacement
91 | }, 
92 | ...</code></pre>
93 |  <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>
94 |  <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>
95 |  <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>
96 |  <p><a href="/">Return to the examples page</a></p>
97 | </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | 
  3 | <html>
  4 | <head>
  5 | 	<title>Code Highlighter 0.2</title>
  6 | 	<script type="text/javascript" src="CodeHighlighter.js"></script>
  7 | 	<script type="text/javascript" src="javascript.js"></script>
  8 | 	<script type="text/javascript" src="css.js"></script>
  9 | 	<script type="text/javascript" src="html.js"></script>
 10 | 	<style type="text/css">
 11 | 	body {
 12 | 		background : #EEE;
 13 | 		font-family: Arial, Helvetica, sans-serif;
 14 | 		margin : 3em 5em;
 15 | 		line-height : 1.5;
 16 | 		font-size: 80%;
 17 | 	}
 18 | 
 19 | 	pre {
 20 | 		border: 1px solid black;
 21 | 		border-color: #BBB #DDD #DDD #BBB;
 22 | 		margin : 2em;
 23 | 		padding : 1em;
 24 | 		line-height: 1.5;
 25 | 		background: white;
 26 | 		overflow: auto;
 27 | 	}
 28 | 	
 29 | 	code {
 30 | 		font-size: 1.2em;
 31 | 	}
 32 | 
 33 | 	h1 span {
 34 | 		font-size : 0.5em;
 35 | 	}
 36 | 
 37 | 	a {
 38 | 		color : gray;
 39 | 	}
 40 | 
 41 | 	/* end of page css - below is for the code highlighter */
 42 | 
 43 | 	.javascript .comment {
 44 | 		color : green;
 45 | 	}
 46 | 
 47 | 	.javascript .string {
 48 | 		color : teal;
 49 | 	}
 50 | 
 51 | 	.javascript .keywords {
 52 | 		color : navy;
 53 | 	}
 54 | 
 55 | 	.javascript .global {
 56 | 		color : blue;
 57 | 	}
 58 | 
 59 | 	.javascript .brackets {
 60 | 		color : navy;
 61 | 	}
 62 | 
 63 | 	.css .comment {
 64 | 		color : gray;
 65 | 	}
 66 | 
 67 | 	.css .properties {
 68 | 		color : navy;
 69 | 	}
 70 | 
 71 | 	.css .selectors {
 72 | 		color : maroon;
 73 | 		font-weight : bold;
 74 | 	}
 75 | 
 76 | 	.css .units {
 77 | 		color :red;
 78 | 	}
 79 | 
 80 | 	.css .urls {
 81 | 		color :green;
 82 | 	}
 83 | 
 84 | 	.html .tag {
 85 | 		color : purple;
 86 | 	}
 87 | 
 88 | 	.html .comment {
 89 | 		color : gray;
 90 | 		font-style: italic;
 91 | 	}
 92 | 
 93 | 	.html .string {
 94 | 		color : navy;
 95 | 	}
 96 | 
 97 | 	.html .doctype {
 98 | 		color : teal;
 99 | 	}
100 | 	</style>
101 | </head>
102 | 
103 | <body>
104 | <h1>CodeHighlighter 0.2 <span>by <a href="http://www.danwebb.net">Dan Webb</a></span></h1>
105 | <p>CodeHighlighter is a lightweight, unobstrusive and fully configurable script for displaying code examples highlighted in a way similar to the way many text editors highlight code.  It weighs in at just under 4K, allows users to configure their own style sets so that you can highlight any language you like and is deployable simply by attaching it to a page with the script tag and adding class names as hooks.  It should also play nicely with any other scripts on your page as it has a tiny footprint on the global namespace.</p>
106 | <p>Many thanks to <a href="http://dean.edwards.name">Dean Edwards</a> who's star-light behaviour inspired this.</p>
107 | <h3>Deploying the script</h3>
108 | <ol>
109 | 	<li>Add a &lt;script&gt; tag for <a href="CodeHighlighter.js">CodeHighlighter.js</a> and a script tag for each of the code types you want to highlight on your page. At this time there are only very basic style sets for <a href="javascript.js">JavaScript</a>, <a href="css.js">CSS</a> and <a href="html.js">HTML</a>.  But it's easy to make your own for any language you like if you know regular expressions.  Let me know if you do and I'll link to them.</li>
110 | 	<li>Add an appropriate class to each &lt;pre&gt; element that contains code. 'javascript', 'css' or 'html' will do the trick.</li>
111 | 	<li>Define CSS styles for each code element, the script simply parses the code and wraps a &lt;span&gt; tag around each element with the appropriate class name.  You just need to write CSS to style the code the way you want.  No programming or weirdness required.  See the source of this code as an example.</li>
112 | </ol>
113 | <h3>Testing</h3>
114 | <p>Known to work on:</p>
115 | <ul>
116 | 	<li>IE 5.5+ PC</li>
117 | 	<li>Firefox 1.0/Mozilla 1.3 + PC</li>
118 | 	<li>Opera 7.23 + PC</li>
119 | 	<li>Netscape 7.2 PC</li>
120 | </ul>
121 | <p>Known to degrade well on:</p>
122 | <ul>
123 | 	<li>IE 5.0 PC</li>
124 | </ul>
125 | <p>Any other feedback for any other browser would be greatly apprieciated.  Please email Dan Webb at dan[at]danwebb[dot]net.  Have a look through the small examples below.</p>
126 | <h3>Creating your own style sets for other languages</h3>
127 | <p>Have a look at this <a href="stylesetguide.htm">guide to creating style sets</a>.</p>
128 | <p>Cheers,<br /><strong>Dan</strong></p>
129 | <h2>Inline code</h2>
130 | <p>Hopefully, you should be able to put some code inline like this: <code class="javascript">document.write("bong")</code> and hopefully it should work.</p>
131 | <h2>JavaScript Example</h2>
132 | <pre><code class="javascript">/*
133 | This script detects external links in a page
134 | and attaches a behaviour to them so they open
135 | in a external window.
136 | */
137 | 
138 | function initialiseLinks() {
139 |     if (document.getElementsByTagName) {
140 |         var links = document.getElementsByTagName(&quot;A&quot;);
141 |         for (var i = 0; i &lt; links.length; i++) {
142 |             if (links[i].href.indexOf(&quot;http:&quot;)==0) {
143 |                 // if the links URL starts with http: then we assume it's an external link
144 |                 links[i].onclick = function() {
145 |                     window.open(this.href);
146 |                     return false; // stop normal link behaviour
147 |                 }
148 |             }
149 |         }
150 |     }
151 | }
152 | 
153 | window.onload = initialiseLinks();</code></pre>
154 | <h2>CSS Example</h2>
155 | <pre><code class="css">.javascript  .comment {
156 | 	color : green; /* ffbgffg */
157 | }
158 | 
159 | .javascript  .string {
160 | 	color : maroon;
161 | }
162 | 
163 | .javascript  .keywords {
164 | 	font-weight : bold;
165 | }
166 | 
167 | .javascript  .global {
168 | 	color : blue;
169 | 	font-weight: bolder;
170 | }
171 | 
172 | .javascript  .brackets {
173 | 	color : Gray;
174 | }
175 | 
176 | .javascript  .thing {
177 | 	font-size : 10px;
178 | 	background : url(ghgfhfg gh f.rtjhf);
179 | }</code></pre>
180 | <h2>HTML Example</h2>
181 | <pre><code class="javascript">
182 | function suckerfish(type, tag, parentId) {
183 | 	if (window.attachEvent) {
184 | 		window.attachEvent("onload", function() {
185 | 			var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
186 | 			type(sfEls);
187 | 		});
188 | 	}
189 | }
190 | 
191 | sfHover = function(sfEls) {
192 | 	for (var i=0; i&lt;sfEls.length; i++) {
193 | 		sfEls[i].onmouseover=function() {
194 | 			this.className+=" sfhover";
195 | 		}
196 | 		sfEls[i].onmouseout=function() {
197 | 			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
198 | 		}
199 | 	}
200 | }
201 | 
202 | sfFocus = function(sfEls) {
203 | 	for (var i=0; i&lt;sfEls.length; i++) {
204 | 		sfEls[i].onfocus=function() {
205 | 			this.className+=" sffocus";
206 | 		}
207 | 		sfEls[i].onblur=function() {
208 | 			this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
209 | 		}
210 | 	}
211 | }
212 | 
213 | sfActive = function(sfEls) {
214 | 	for (var i=0; i&lt;sfEls.length; i++) {
215 | 		sfEls[i].onmousedown=function() {
216 | 			this.className+=" sfactive";
217 | 		}
218 | 		sfEls[i].onmouseup=function() {
219 | 			this.className=this.className.replace(new RegExp(" sfactive\\b"), "");
220 | 		}
221 | 	}
222 | }
223 | 
224 | sfTarget = function(sfEls) {
225 | 	var aEls = document.getElementsByTagName("A");
226 | 	document.lastTarget = null;
227 | 	for (var i=0; i&lt;sfEls.length; i++) {
228 | 		if (sfEls[i].id) {
229 | 			if (location.hash==("#" + sfEls[i].id)) {
230 | 				sfEls[i].className+=" sftarget";
231 | 				document.lastTarget=sfEls[i];
232 | 			}
233 | 			for (var j=0; j&lt;aEls.length; j++) {
234 | 				if (aEls[j].hash==("#" + sfEls[i].id)) aEls[j].targetEl = sfEls[i];
235 | 				aEls[j].onclick = function() {
236 | 					if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");
237 | 					if (this.targetEl) this.targetEl.className+=" sftarget";
238 | 					document.lastTarget=this.targetEl;
239 | 					return true;
240 | 				}
241 | 			}
242 | 		}
243 | 	}
244 | }</code></pre>
245 | </body>
246 | </html>
247 | 


--------------------------------------------------------------------------------