JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
<div id="wrapper">
  <div id="editor" class="editor">
    function foo(items) { var x = "All this is syntax highlighted"; return x; }
  </div>
</div>

CSS

#wrapper {
    width: 80%;
    height: 90vh;
    margin-left: 10%;
    margin-right: 10%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
}

div.editor {
    width: 100%;
    height: 60%;
}

JavaScript

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");