Improve highlights

bundle.js

@@ -22,7 +22,29 @@ $(function() {
 
         var examples = []
         data['examples'].forEach(function(item) {
-          examples.push('<li>' + item[0] + ' &mdash; ' + item[1] + '</li>')
+          var left       = item['left']
+          var right      = item['right']
+          var highlights = item['highlights']
+
+          var highlighted = []
+          if (highlights.length == 0) {
+            highlighted.push(left)
+          } else {
+            var last_pos = 0
+            highlights.forEach(function(highlight) {
+              var pos = highlight['pos']
+              var len = highlight['len']
+              if (pos > 0) { highlighted.push(left.substring(last_pos, pos)) }
+              last_pos = pos + len
+              highlighted.push(
+                '<b>' + left.substring(pos, pos + len) + '</b>'
+              )
+            })
+          }
+
+          examples.push(
+            '<li>' + highlighted.join('') + ' &mdash; ' + right + '</li>'
+          )
         })
 
         $('#primary-form').text(primary_form)