HTMLHint Validator for Codemirror

Question

I was looking for html lint for Codemirror

I found HTMLHint for the ACE Editor, but later after searching Codemirror's Git Repository I found their lint's. I've played with CSSLint and JSHint before, but haven't found anything for Codemirror.

Does anyone know how to get an HTML Validator like HTMLHint to work with Codemirror?

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: '<div class="container-fluid">\n  <div class="row">\n    <div class="col-lg-12">\n      <div class="input-group">\n        <input type="txt" class="form-control" data-action="genoutput" />\n        <span class="input-group-btn" class="input-group-btn">\n          <button class="btn btn-default btn-primary" type="button" data-action"gen">\n            Generate!\n          </button>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>'
});

// 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);

@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;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/javascripts/code-completion.js"></script>
<script src="http://codemirror.net/javascripts/css-completion.js"></script>
<script src="http://codemirror.net/javascripts/html-completion.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<script src="http://codemirror.net/addon/lint/lint.js"></script>
<script src="http://codemirror.net/addon/hint/xml-hint.js"></script>
<script src="http://codemirror.net/addon/hint/html-hint.js"></script>
<script src="http://codemirror.net/addon/lint/javascript-lint.js"></script>
<script src="http://codemirror.net/addon/lint/css-lint.js"></script>

<div id="code" name="code"></div>
<iframe id="preview"></iframe>

Answer 1

You'll have to write the glue code that connects HTMLHint's output to CodeMirror's lint addon. See the docs here, and use the other lint module wrappers as examples. (If you get something working, a pull request to put it into the distribution would be wondeful.)