JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<textarea id="test">
somecode()
/* section start */
sectioncode()
/* section end */
othercode()
</textarea>

JavaScript

var edEl = document.getElementById('test'),
    ed = CodeMirror.fromTextArea(edEl, {
        mode: 'javascript',
        lineNumbers: true
    });

ed.markText({line: 0}, {line: 2, ch: 0}, {
    readOnly: true
})

ed.markText({ch:0, line:1}, {ch:19, line:1}, {
    inclusiveLeft: true,
    inclusiveRight: true,
    collapsed: true,
    replacedWith: function() {
        var el = document.createElement('span');
        el.style.cssText='background:red;color:white;display:inline-block;width: 100%';
        el.innerHTML = 'section start';
        return el;
    }()
});