After using the Unobtrusive Code Highlighter for sometime I decided to extend it to support nested rules. For example, if a keyword is in a string that keyword should still be highlighted appropriately. I currently use this library for C#, XAML, Ruby, Javascript, CSS, HTML, and Radius coding examples. The new implementation takes the concepts of HighlightStyle and HightlightRule and implements them as prototype classes; the beta is included in the download package you can get
here Below are a sample from each language:
C#
public abstract class MyClassName
{
private List<string> _myMemberVariable = new List<string>();
public List<string> MyMemberVariable
{
get { return _myMemberVariable; }
set { _myMemberVariable = value; }
}
// Remark: Comments are colored correctly
public void MyMethod(int myParam)
{
Console.Out.PrintLine("C# Code Formatting!");
}
}
XAML
<!-- Here are some XAML comments -->
<Color x:Key="MyBackColor" R="#80" G="#80" B="#C8" A="#FF" />
<Style x:Key="ActiveRectangle" TargetType="{x:Type Rectangle}" >
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="{ce:RelativeColor BaseColorKey=MyBackColor,Style=Lighten}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Fill" Value="{ce:RelativeColor BaseColorKey=MyBackColor,Style=Normal}"/>
</Trigger>
</Style.Triggers>
</Style>
Ruby
def to_xml(options = {})
options[:indent] ||= 2
xml = options[:builder] ||= Builder::XmlMarkup.new(:indent => options[:indent])
xml.instruct! unless options[:skip_instruct]
xml.tag!("form-response", :id => id) do
xml.tag!("created-at", created_at.strftime("%Y-%m-%d %H:%M")) if options[:show_timestamps]
content.each do |name, value|
if(!options[:fields].nil? && options[:fields].include?(name))
xml.tag!(name.dasherize, value)
end
end
end
end
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1>Sample HTML Content</h1>
</div>
</body>
</html>
Radius
<r:children:each by="published_at" order="desc" limit="10">
<r:snippet name="article" />
</r:children:each>
CSS
/*--------------------------------------------------------------
C#
--------------------------------------------------------------*/
#content pre code.sharp { color: white; }
#content code.csharp span.comment { color: #66cc33; }
#content code.csharp span.string { color: #a31515; }
#content code.csharp span.keywords { color: #3387cc; }
Javascript
HighlightStyle.prototype.parse = function(text, ignoreCase) {
// main text parsing and replacement
var rules = this.styleRules;
return text.replace(new RegExp(this.styleRules, (ignoreCase) ? "gi" : "g"), function() {
var i = 0, j = 1, rule;
while (rule = rules[i++]) {
if (arguments[j]) {
// if no custom replacement defined do the simple replacement
if (rule.replacement == null) {
return "" + arguments[0] + "";
} else {
// replace $0 with the className then do normal replaces
var str = rule.replacement.replace("$0", rule.className);
for (var k = 1; k <= rule.length - 1; k++) str = str.replace("$" + k, arguments[j + k + 1]);
return str;
}
} else j += rule.length;
}
});
}