JSFiddle - React, Tailwind, and code Playground

by laomao800

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CodeMirror: Inline Widget Demo</title>
    <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
    <script src="http://codemirror.net/lib/codemirror.js"></script>
    <script src="http://codemirror.net/mode/javascript/javascript.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
    <link rel="stylesheet" href="http://codemirror.net/doc/docs.css">

    <style type="text/css">
      .CodeMirror {border: 1px solid black;}
      .lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
      .lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;}
    </style>
  </head>
  <body>
    <div id=code></div>
  </body>
</html>

JavaScript

var body = window.document.body.innerHTML,
  content = "";

for (var i = 0; i < 3; i++) {
  content += body + "\n";
}

var editor = CodeMirror(document.getElementById("code"), {
  lineNumbers: true,
  mode: "html",
  value: content
});

// create a very tall widget
var $widget = $("<span style='background-color:#f90'>工时汇总</span>");

// log scroller height
editor.on("scroll", function () {
  $("#scrollHeightText").text(editor.getScrollerElement().scrollHeight);
   $("#widgetHeightText").text($widget.height());
});

// scroll to the bottom to move line 1 out of the viewport
editor.scrollIntoView({line: editor.lineCount() - 1, ch: 0});

// add widget to line 1
editor.addLineWidget(0, $widget[0]);

// now, manually scroll up the editor and notice that the scroller scrollHeight jumps once line 1 and it's widget is in the viewport