Style sets are written in JavaScript and are used by CodeHighlighter to match specific types of code and wrap them in, normally, a <span> 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:
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<span class=\"$0\">$2</span>"
},
urls : {
exp : /url\([^\)]*\)/
}
});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 <pre> tag with the class "css" will use this style set.
The second argument to the method is an object containing the rules. Here's how a single rule goes together:
...
classname : {
exp : /a regexp/, // or a reg exp as a string
replacement : "$1<span class=\"$0\">$2</span>" // optional advanced replacement
},
...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 exp which is mandatory and contains the RegExp (either in RegExp notation or as a string) required to match the text and a property replacement which is optional and only used for advanced replaces.
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.
Note: 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.