title: HTMLHint Validator for Codemirror
body: <p>I was looking for html <a href="https://codemirror.net/demo/lint.html" rel="nofollow">lint</a> for <a href="http://codemirror.net/" rel="nofollow">Codemirror</a></p>
  
  <p>I found <a href="http://htmlhint.com/" rel="nofollow">HTMLHint</a> for the <a href="http://ace.c9.io/" rel="nofollow">ACE Editor</a>, but later after searching <a href="https://github.com/codemirror/CodeMirror/" rel="nofollow">Codemirror's Git Repository</a> I found their <a href="https://github.com/codemirror/CodeMirror/tree/master/addon/hint" rel="nofollow">lint's</a>. I've played with CSSLint and JSHint before, but haven't found anything for Codemirror.</p>
  
  <p>Does anyone know how to get an HTML Validator like <a href="http://htmlhint.com/" rel="nofollow">HTMLHint</a> to work with Codemirror?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var delay;
  
  // Initialize CodeMirror editor
  var editor = CodeMirror(document.getElementById('code'), {
    mode: 'text/html',
    tabMode: 'indent',
    styleActiveLine: true,
    lineNumbers: true,
    lineWrapping: true,
    autoCloseTags: true,
    foldGutter: true,
    dragDrop : true,
    lint: true,
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
    value: '&lt;div class="container-fluid"&gt;\n  &lt;div class="row"&gt;\n    &lt;div class="col-lg-12"&gt;\n      &lt;div class="input-group"&gt;\n        &lt;input type="txt" class="form-control" data-action="genoutput" /&gt;\n        &lt;span class="input-group-btn" class="input-group-btn"&gt;\n          &lt;button class="btn btn-default btn-primary" type="button" data-action"gen"&gt;\n            Generate!\n          &lt;/button&gt;\n        &lt;/span&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;'
  });
  
  // Live preview
  editor.on('change', function() {
    clearTimeout(delay);
    delay = setTimeout(updatePreview, 300);
  });
  function updatePreview() {
    var previewFrame = document.getElementById('preview');
    var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
    preview.open();
    preview.write(editor.getValue());
    preview.close();
  }
  setTimeout(updatePreview, 300);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
  @import url("http://codemirror.net/lib/codemirror.css");
  @import url("http://codemirror.net/addon/lint/lint.css");
  @import url("http://codemirror.net/addon/fold/foldgutter.css");
  
  .CodeMirror {
    float: left;
    width: 50%;
    border: 1px solid black;
  }
  
  iframe {
    width: 49%;
    float: left;
    height: 300px;
    border: 1px solid black;
    border-left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/lib/codemirror.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/javascripts/code-completion.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/javascripts/css-completion.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/javascripts/html-completion.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/mode/javascript/javascript.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/mode/xml/xml.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/mode/css/css.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/edit/closetag.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/edit/matchbrackets.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/selection/active-line.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/keymap/extra.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/fold/foldcode.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/fold/foldgutter.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/fold/brace-fold.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/fold/xml-fold.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/fold/comment-fold.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/lint/lint.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/hint/xml-hint.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/hint/html-hint.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/lint/javascript-lint.js"&gt;&lt;/script&gt;
  &lt;script src="http://codemirror.net/addon/lint/css-lint.js"&gt;&lt;/script&gt;
  
  &lt;div id="code" name="code"&gt;&lt;/div&gt;
  &lt;iframe id="preview"&gt;&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>