use SyntaxHighlighter in readme

readme/css/readme.css

@@ -20,8 +20,7 @@ code {
 .text {
     padding: 16px 24px 16px 24px;
 }
-.title {
+.text h1 {
     font-weight: bold;
     font-size: 16px;
 }
-

readme/html/test1.html

@@ -1,4 +1,4 @@
-<p class="title">This is just a test</p>
+<h1>This is just a test</h1>
 
 <p>Foo bar baz.</p>
 

readme/html/test2.html

@@ -1 +1,58 @@
-<p class="title">This is another test, with a longer title</p>
+<h1>Before and After</h1>
+<p><pre class="code">
+// before:
+var exists = array.indexOf(value) > -1;
+// after:
+var exists = Ox.in(array, value);
+
+// before:
+var key;
+for (var k in obj) {
+    if (obj[k] === value) {
+        key = k;
+        break;
+    }
+}
+// after:
+var key = Ox.keyOf(object, value);
+
+
+// before:
+var last = arrayWithLongName[arrayWithLongName.length - 1];
+// after:
+var last = Ox.last(arrayWithLongName);
+
+// before:
+arrayWithLongName[arrayWithLongName.length - 1] = 0;
+// after:
+Ox.last(arrayWithLongName, 0);
+
+// before:
+myString = myString.substr(2, myString.length - 4);
+// or:
+myString = myString.substring(2, myString.length - 2);
+// after:
+myString = Ox.sub(myString, 2, -2);
+
+// before:
+myArray = myArray.filter(function(v, i) {
+    return i > 1 && i < myArray.length - 2;
+});
+// after:
+myArray = Ox.sub(myArray, 2, -2);
+
+// before:
+myNumber = Math.min(Math.max(myNumber, min), max);
+// after:
+myNumber = Ox.limit(myNumber, min, max);
+
+// before:
+var random = min + Math.floor(Math.random() * (max - min));
+// after:
+var random = Ox.random(min, max);
+
+// before:
+var mod = -1 % 10 // -1;
+// after:
+var mod = Ox.mod(-1, 10) // 9
+</pre><p>

readme/js/readme.js

@@ -17,7 +17,7 @@ Ox.load('UI', function() {
     function loadHTML(files, callback) {
         files.forEach(function(file) {
             Ox.get('html/' + file.name, function(html) {
-                var match = html.match(/<p class="title">(.+)<\/p>/);
+                var match = html.match(/<h1>(.+)<\/h1>/);
                 items.push({
                     date: file.date,
                     file: file.name,
@@ -42,7 +42,7 @@ Ox.load('UI', function() {
             .addClass('head')
             .append($ui.logo)
             .append($ui.title);
-        $ui.text = Ox.Element().addClass('text'),
+        $ui.text = Ox.Container().addClass('text'),
         $ui.inner = Ox.SplitPanel({
                 elements: [
                     {
@@ -121,6 +121,17 @@ Ox.load('UI', function() {
         Ox.print(data)
         if (data.ids.length) {
             $ui.text.html(Ox.getObject(items, 'file', data.ids[0]).html);
+            $ui.text.find('.code').each(function() {
+                var $this = $(this);
+                $this.replaceWith(
+                    Ox.SyntaxHighlighter({
+                        source: $this.text()
+                    })
+                    .css({
+                        border: '1px solid rgb(192, 192, 192)'
+                    })
+                );
+            })
         } else {
             $ui.text.empty();
         }