JSFiddle - React, Tailwind, and code Playground

by Alexey Ryazhskikh

HTML

<textarea id="rules" class="form-control" rows="4">
      Some test here
      error line here
     end
</textarea>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/lint/lint.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.5.0/addon/lint/lint.js"></script>
<style>

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

JavaScript

var editor = CodeMirror.fromTextArea(document.getElementById("rules"), {
     lineNumbers: true,
     inputStyle: 'textarea',
     gutters: ["CodeMirror-lint-markers"],
     lint: true
 });

var err = {
    line: 1,
    reason: "Test Error Message"
};
var widgets = [];
var msg = document.createElement("div");
var icon = msg.appendChild(document.createElement("span"));
icon.innerHTML = "!";
icon.className = "lint-error-icon";
msg.appendChild(document.createTextNode(err.reason));
msg.className = "lint-error";
widgets.push(editor.addLineWidget(err.line - 1, msg, { coverGutter: true, noHScroll: true }));