Codemirror HTML Linter

https://github.com/mikethedj4/html-lint-for-codemirror

by toubia95

HTML

<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/addon/dialog/dialog.js"></script>
<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://codemirror.net/addon/lint/html-lint.js"></script>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/lint/lint.css">
<link rel="stylesheet" href="https://codemirror.net/addon/fold/foldgutter.css">
<script src="http://htmlhint.com/js/htmlhint.js"></script>
<script src="https://htmlhint.com/js/htmlhint.js"></script>
<textarea id="editor">
<html>
  <head>
    <title>site name</title>
    <meta charset=utf-8>
    <meta name='viewport' content="initial-scale=1.0">
  </head>
  <body>
    <span id="hello">hello </span>
  </body>
</html>
</textarea>

JavaScript

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
  mode: "text/html",
  tabMode: "indent",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  dragDrop : true,
  lint: true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-lint-markers"]
});