JSFiddle - React, Tailwind, and code Playground

by RichieHindle

HTML

<div id='fancy'></div>
<textarea rows='10' cols='40' id='plain' wrap='off'>This is an editor.
Please excuse the lack of caret,
but you'll find that typing,
selecting, deleting, copy/cut/paste,
Find, drag/drop, etc. etc., should all
work, in glorious technicolor, in Chrome,
Firefox, IE11, Edge, and (mostly) iOS,
even in 汉语 or العَرَبِية.

You can even scroll it



because




the




text




goes




all




the




way




down




here.


</textarea>

CSS

#fancy, #plain {
  position: absolute;
  width: 400px;
  height: 200px;
  padding: 0;
  margin: 0;
  font-family: monospace;
  font-size: 12pt;
}

pre {
  margin: 0;
  padding-bottom: 2em;  /* Increase scroll range */
}

#plain {
  outline: 0;
  resize: none;
  border: 1px solid silver;
  color: transparent;
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
}

#fancy {
  border: 1px solid transparent;
  overflow: auto;
}

.s1 {
  color: red;
  font-weight: bold;
}

.s2 {
  color: green;
  font-style: italic;
}

.s3 {
  color: purple;
}

.s4 {
  color: blue;
}

JavaScript

function update(ev) {
  var text = $('#plain').val(); // Add syntax colouring!:
  if (ev) { console.log(ev.type + ": " + text); }
  text = text.replace(/(\w+)/g, function (match, p1) {
    var c = p1.length % 4 + 1;
    return "<span class='s" + c + "'>" + p1 + "</span>";
  });
  var fancy_content = $('<pre>');
  fancy_content.html(text);
	$('#fancy').empty().append(fancy_content);
  update_scroll();
}

function update_scroll() {
  $('#fancy').scrollTop($('#plain').scrollTop());
  $('#fancy').scrollLeft($('#plain').scrollLeft());
}

$(function () {
	update();
	$('#plain').on('input', update)
             .on('select', update)
             .on('scroll', update_scroll);
});