Add clickable links for violations and rules, highlight for violations.

demo/default.css

@@ -31,6 +31,9 @@ textarea {
   flex-grow: 1;
   flex-basis: 0;
 }
+.highlight {
+  background: yellow;
+}
 .inset {
   box-sizing: border-box;
   padding: 2px;

demo/default.htm

@@ -20,7 +20,7 @@
       <div id="markup" class="flex-fill outlined overflow-auto-scroll"></div>
     </div>
     <div class="flex-fill flex-columns">
-      <div id="numbered" class="flex-fill outlined overflow-auto-scroll"></div>
+      <pre id="numbered" class="flex-fill outlined overflow-auto-scroll"></pre>
       <div id="violations" class="flex-fill outlined overflow-auto-scroll"></div>
     </div>
     <div>

demo/default.js

@@ -9,9 +9,11 @@
   var form = document.getElementsByTagName("form")[0];
   var openFile = document.getElementById("openFile");
 
-  // Instances
+  // Variables
   var markdownit = window.markdownit();
   var newLineRe = /\r\n|\r|\n/;
+  var rulesMd = "https://github.com/DavidAnson/markdownlint" +
+    "/blob/master/doc/Rules.md";
 
   // Handle input
   function onMarkdownInput() {
@@ -20,9 +22,14 @@
     // Markup
     markup.innerHTML = markdownit.render(content);
     // Numbered
-    numbered.innerText = content.split(newLineRe)
+    var lines = content.split(newLineRe);
+    var padding = lines.length.toString().replace(/\d/g, " ");
+    numbered.innerHTML = lines
       .map(function mapNumberedLine(line, index) {
-        return (index + 1) + ": " + line;
+        index++;
+        var paddedIndex = (padding + index).slice(-padding.length);
+        return "<span id='l" + index + "'><em>" + paddedIndex + "</em>: " +
+          line + "</span>";
       }).join("\n");
     // Violations
     var options = {
@@ -31,10 +38,16 @@
       }
     };
     var results = window.markdownlint.sync(options).toString();
-    violations.innerText = results.split(newLineRe)
+    violations.innerHTML = results.split(newLineRe)
       .map(function mapResultLine(line) {
-        return line.replace(/^content: /, "");
-      }).join("\n");
+        return line.replace(/^content: (\d+): (MD\d\d\d) (.*)$/,
+          function replacer(match, p1, p2, p3) {
+            var ruleRef = rulesMd + "#" + p2.toLowerCase() + "---" +
+              p3.toLowerCase().replace(/ /g, "-");
+            return "<a href='#" + p1 + "'><em>" + p1 + "</em></a> - " +
+              "<a href='" + ruleRef + "' target='_blank'>" + p2 + "</a> " + p3;
+          });
+      }).join("<br/>");
   }
 
   // Load from a string or File object
@@ -77,9 +90,24 @@
     }
   }
 
+  // Handle violation navigation
+  function onLineNumberClick(e) {
+    var line = document.getElementById("l" + e.target.innerText);
+    if (line) {
+      var highlighted = document.getElementsByClassName("highlight");
+      Array.prototype.forEach.call(highlighted, function forElement(element) {
+        element.classList.remove("highlight");
+      });
+      line.classList.add("highlight");
+      line.scrollIntoView();
+      e.preventDefault();
+    }
+  }
+
   // Add event listeners
   document.body.addEventListener("dragover", onDragOver);
   document.body.addEventListener("drop", onDrop);
   openFile.addEventListener("change", onOpenFileChange);
   markdown.addEventListener("input", onMarkdownInput);
+  violations.addEventListener("click", onLineNumberClick, true);
 }());