JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

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

CSS

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

JavaScript

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

editor.commands.addCommand({
  name: 'myCommand',
  bindKey: {
    win: 'Ctrl-Shift-M',
    mac: 'Alt+Shift+,'
  },
  exec: function(editor) {
    console.log("myCommand");
  },
  readOnly: true // false if this command should not apply in readOnly mode
});