JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js"></script>
<div id="editor">// `scope 1` - (global)

function foo() {
  // `scope 2` - (local for function `foo`)
  // have access to `scope 1`

  if (true) {
    // this is still `scope 2`
    console.log('I have access `to scope 1`');
  }

  function bar() {
    // scope 3 (local for function `bar`)
    // have access to `scope 2` and `scope 1`
  }
}</div>

CSS

#editor { 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.errorHighlight {
  position: absolute;
  z-index: 20;
  background-color: #fff;
  opacity: 0.1;
}

JavaScript

var Range = ace.require("ace/range").Range;

var editor = ace.edit("editor");

editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

editor.session.addMarker(new Range(0, 0, 17, 1), "errorHighlight", "text");

editor.session.addMarker(new Range(2, 15, 17, 1), "errorHighlight", "text");

editor.session.addMarker(new Range(11, 17, 14, 3), "errorHighlight", "text");