Inline Widget Demo

!!Expected an assignment or function call and instead saw an expression.
"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
 
1
var widgets = []
!!Missing semicolon.
2
function updateHints() {
3
  editor.operation(function(){
4
    for (var i = 0; i < widgets.length; ++i)
5
      editor.removeLineWidget(widgets[i]);
6
    widgets.length = 0;
7
​
8
    JSHINT(editor.getValue());
9
    for (var i = 0; i < JSHINT.errors.length; ++i) {
!!'i' is already defined.
10
      var err = JSHINT.errors[i];
11
      if (!err) continue;
12
      var msg = document.createElement("div");
13
      var icon = msg.appendChild(document.createElement("span"));
14
      icon.innerHTML = "!!";
15
      icon.className = "lint-error-icon";
16
      msg.appendChild(document.createTextNode(err.reason));
17
      msg.className = "lint-error";
18
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
19
    }
20
  });
21
  var info = editor.getScrollInfo();
22
  var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
23
  if (info.top + info.clientHeight < after)
24
    editor.scrollTo(null, after - info.clientHeight + 3);
25
}
26
​
27
window.onload = function() {
28
  var sc = document.getElementById("script");
29
  var content = sc.textContent || sc.innerText || sc.innerHTML;
30
​
31
  window.editor = CodeMirror(document.getElementById("code"), {
32
    lineNumbers: true,

This demo runs JSHint over the code in the editor (which is the script used on this page), and inserts line widgets to display the warnings that JSHint comes up with.