diff --git a/prototype/Doubt.xcodeproj/xcshareddata/xcschemes/doubt-difftool.xcscheme b/prototype/Doubt.xcodeproj/xcshareddata/xcschemes/doubt-difftool.xcscheme
index 27fa88837..2de6b9e1d 100644
--- a/prototype/Doubt.xcodeproj/xcshareddata/xcschemes/doubt-difftool.xcscheme
+++ b/prototype/Doubt.xcodeproj/xcshareddata/xcschemes/doubt-difftool.xcscheme
@@ -64,7 +64,7 @@
       <CommandLineArguments>
          <CommandLineArgument
             argument = "--unified"
-            isEnabled = "YES">
+            isEnabled = "NO">
          </CommandLineArgument>
          <CommandLineArgument
             argument = "https://raw.githubusercontent.com/jquery/jquery/2.1.0/src/effects.js"
diff --git a/prototype/UI/diff.js b/prototype/UI/diff.js
index fa4448879..5b50d50fe 100644
--- a/prototype/UI/diff.js
+++ b/prototype/UI/diff.js
@@ -67,10 +67,12 @@ function wrap(tagName, element) {
 }
 
 /// String -> Syntax a -> Range -> (a -> Range) -> (a -> DOM) -> DOM
-function rangeAndSyntaxToDOM(source, syntax, range, getRange, recur) {
+function termToDOM(source, syntax, extract, getRange, recur) {
 	recur = recur || function(term) {
-		return rangeAndSyntaxToDOM(source, term.unwrap, term.extract, getRange);
+		return termToDOM(source, term.unwrap, term.extract, getRange);
 	}
+	var categories = extract.categories;
+	var range = extract.range;
 	var element;
 	if (syntax.leaf != null) {
 		element = document.createElement("span");
@@ -83,18 +85,9 @@ function rangeAndSyntaxToDOM(source, syntax, range, getRange, recur) {
 			var child = values[i];
 			if (child.pure == "") continue;
 			var childRange = getRange(child);
-			if (childRange.before != null) {
-				var beforeRange = childRange.before;
-				element.appendChild(document.createTextNode(source.substr(previous, beforeRange[0] - previous)));
-				element.appendChild(wrap("li", recur(child)));
-				previous = beforeRange[0] + beforeRange[1];
-			}
-			if (childRange.after != null) {
-				var afterRange = childRange.before;
-				element.appendChild(document.createTextNode(source.substr(previous, afterRange[0] - previous)));
-				element.appendChild(wrap("td", recur(child)));
-				previous = afterRange[0] + afterRange[1];
-			}
+			element.appendChild(document.createTextNode(source.substr(previous, childRange[0] - previous)));
+			element.appendChild(wrap("li", recur(child)));
+			previous = childRange[0] + childRange[1];
 		}
 		element.appendChild(document.createTextNode(source.substr(previous, range[0] + range[1] - previous)));
 	} else if (syntax.keyed != null) {
@@ -127,6 +120,11 @@ function rangeAndSyntaxToDOM(source, syntax, range, getRange, recur) {
 		element.appendChild(document.createTextNode(source.substr(previous, range[0] + range[1] - previous)));
 	}
 	element["data-range"] = range;
+
+	for (index in categories) {
+		element.classList.add('category-'+categories[index]);
+	}
+
 	return element;
 }
 
@@ -137,11 +135,11 @@ function diffToDOM(diff, sources) {
 		if (diffOrTerm.pure != null) {
 			var beforeRange, afterRange;
 			if (diffOrTerm.pure.before != null) {
-				beforeRange = diffOrTerm.pure.before.extract
+				beforeRange = diffOrTerm.pure.before.extract.range
 			}
 
 			if (diffOrTerm.pure.after != null) {
-				afterRange = diffOrTerm.pure.after.extract
+				afterRange = diffOrTerm.pure.after.extract.range
 			}
 
 			if (beforeRange == null) {
@@ -154,10 +152,10 @@ function diffToDOM(diff, sources) {
 			return { "before": beforeRange, "after": afterRange };
 		}
 		if (diffOrTerm.roll != null) {
-			return diffOrTerm.roll.extract;
+			return { before: diffOrTerm.roll.extract.before.range, after: diffOrTerm.roll.extract.after.range };
 		}
 		if (diffOrTerm.extract != null) {
-			return diffOrTerm.extract;
+			return diffOrTerm.extract.range;
 		}
 	}
 
@@ -175,7 +173,7 @@ function diffToDOM(diff, sources) {
 function pureToDOM(sources, patch, getRangeFun, diffToDOMFun) {
 	var elementA, elementB;
 	if (patch.before != null) {
-		elementA = rangeAndSyntaxToDOM(sources.before, patch.before.unwrap, patch.before.extract, getRangeFun);
+		elementA = termToDOM(sources.before, patch.before.unwrap, patch.before.extract, getRangeFun);
 		elementA.classList.add("delete");
 		if (patch.after != null) {
 			elementA.classList.add("replace");
@@ -183,7 +181,7 @@ function pureToDOM(sources, patch, getRangeFun, diffToDOMFun) {
 	}
 
 	if (patch.after != null) {
-		elementB = rangeAndSyntaxToDOM(sources.after, patch.after.unwrap, patch.after.extract, getRangeFun);
+		elementB = termToDOM(sources.after, patch.after.unwrap, patch.after.extract, getRangeFun);
 		elementB.classList.add("insert");
 		if (patch.before != null) {
 			elementB.classList.add("replace");
@@ -205,7 +203,14 @@ function pureToDOM(sources, patch, getRangeFun, diffToDOMFun) {
 
 function rollToDOM(sources, rollOrTerm, getRangeFun, diffToDOMFun) {
 	var syntax = rollOrTerm.unwrap
-	var range = rollOrTerm.extract
+	var categories = {
+		before: rollOrTerm.extract.before.categories,
+		after: rollOrTerm.extract.after.categories
+	}
+	var range = {
+		before: rollOrTerm.extract.before.range,
+		after: rollOrTerm.extract.after.range
+	}
 
 	var elementA;
 	var elementB;
@@ -429,6 +434,14 @@ function rollToDOM(sources, rollOrTerm, getRangeFun, diffToDOMFun) {
 		elementB.appendChild(document.createTextNode(textB));
 	}
 
+	for (index in categories.before) {
+		elementA.classList.add('category-'+categories.before[index]);
+	}
+
+	for (index in categories.after) {
+		elementB.classList.add('category-'+categories.after[index]);
+	}
+
 	return { "before": elementA, "after": elementB }
 }
 
diff --git a/prototype/UI/dom.js b/prototype/UI/dom.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/prototype/UI/index.html b/prototype/UI/index.html
index 3bcd72d54..3d1b3da27 100644
--- a/prototype/UI/index.html
+++ b/prototype/UI/index.html
@@ -29,25 +29,69 @@
         background-color: #ffffec;
         outline: 1px solid #e9e9c0;
     }
-		.invisible {
-			background-color: #fff;
-			visibility: hidden;
-		}
+
+    .invisible {
+    	background-color: #fff;
+    	visibility: hidden;
+    }
 
     .diff div, .diff ul, .diff li, .diff dl, .diff dd, .diff span {
         white-space: pre-wrap;
         display: inline;
         margin: 0;
         padding: 0;
+        color: initial;
     }
 
     .diff dt {
         display: none;
     }
+
+    /* syntax highlighting */
+    .diff .category-regex,
+    .diff .category-string {
+        color: #183691;
+    }
+
+    .diff .category-false,
+    .diff .category-true,
+    .diff .category-null,
+    .diff .category-undefined,
+    .diff .category-number,
+    .diff .category-function_call>li>.category-identifier,
+    .diff .category-function_call>li>.category-member_access>.category-identifier,
+    .diff .category-member_access>:not(:first-child)>.category-identifier {
+        color: #0086b3;
+    }
+
+    .diff .category-comment {
+        color: #969896;
+    }
+
+    .diff [class^="category-"][class$="_op"],
+    .diff .category-ternary,
+    .diff .category-var_declaration,
+    .diff .category-new_expression,
+    .diff .category-if_statement,
+    .diff .category-do_statement,
+    .diff .category-for_statement,
+    .diff .category-for_in_statement,
+    .diff .category-return_statement,
+    .diff .category-function,
+    .diff .category-assignment,
+    .diff .category-var_assignment {
+        color: #a71d5d;
+    }
+
+    .diff .category-function>li:first-child>.category-identifier,
+    .diff .category-new_expression>li>.category-function_call>li:first-child>.category-identifier,
+    .diff .category-pair>li:first-child>.category-identifier,
+    .diff .category-assignment>li:first-child>.category-member_access>:not(:first-child)>.category-identifier {
+        color: #795da3;
+    }
     </style>
     <script type="text/javascript" src="dictionary.js"></script>
     <script type="text/javascript" src="diff.js"></script>
-    <script type="text/javascript" src="dom.js"></script>
     <script type="text/javascript" src="patch.js"></script>
     <script type="text/javascript" src="syntax.js"></script>
     <script type="text/javascript" src="term.js"></script>
@@ -66,16 +110,15 @@
     </script>
   </head>
   <body>
-		<div id="before" class="diff"></div>
-		<div id="after" class="diff"></div>
+	<div id="before" class="diff"></div>
+	<div id="after" class="diff"></div>
 
     <script type="text/javascript">
     loadJSON((window.location.search || '?diff.json').substr(1), function (json) {
         var diff = diffFromJSON(json.diff);
-
-				var dom = diffToDOM(diff, { "before": json["before"] , "after": json["after"] })
-				document.getElementById("before").appendChild(dom.before);
-				document.getElementById("after").appendChild(dom.after);
+		var dom = diffToDOM(diff, { "before": json["before"] , "after": json["after"] })
+		document.getElementById("before").appendChild(dom.before);
+		document.getElementById("after").appendChild(dom.after);
     });
     </script>
   </body>
diff --git a/prototype/UI/term.js b/prototype/UI/term.js
index 10dae6208..f0e834616 100644
--- a/prototype/UI/term.js
+++ b/prototype/UI/term.js
@@ -12,12 +12,3 @@ function Term(object) {
 	this.unwrap = object.unwrap;
 	return this;
 }
-
-/// Term -> String -> DOM
-function termToDOM(term, which, source) {
-	return rangeAndSyntaxToDOM(term.range, term.unwrap, source, function(term) {
-		return term.range;
-	}, function(term) {
-		return termToDOM(term, which, source);
-	});
-}
diff --git a/prototype/doubt-difftool/main.swift b/prototype/doubt-difftool/main.swift
index c8ce9a0b1..cb25c8ac4 100644
--- a/prototype/doubt-difftool/main.swift
+++ b/prototype/doubt-difftool/main.swift
@@ -160,10 +160,10 @@ case .Split:
 	let JSON: Doubt.JSON = [
 		"before": .String(aSource.contents),
 		"after": .String(bSource.contents),
-		"diff": diff.JSON(pure: { $0.JSON { $0.JSON(annotation: { $0.range.JSON }, leaf: Doubt.JSON.String) } }, leaf: Doubt.JSON.String, annotation: {
+		"diff": diff.JSON(pure: { $0.JSON { $0.JSON(annotation: { $0.JSON }, leaf: Doubt.JSON.String) } }, leaf: Doubt.JSON.String, annotation: {
 			[
-				"before": $0.range.JSON,
-				"after": $1.range.JSON,
+				"before": $0.JSON,
+				"after": $1.JSON,
 			]
 		}),
 	]