jxnblk/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/bassdock/1.3.6/bassdock.min.css">
  <link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">
  <style>
    .bb{box-sizing:border-box}
    .outline * { outline: 1px solid rgba(255,0,127,.5) }
    pre {
      border-radius: 0;
      padding: 0;
    }
    .pre {
      padding: 0;
      margin: 0;
      background-color: transparent;
    }
    .pre:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px rgba(0,127,255,.5);
    }
  </style>
</head>
<body class="bb px3">

  <h1 class="bb">editable-pre</h1>

  <div class="border">
    <div class="relative">
      <pre id="linos"
        style="width:24px"
        class="absolute top-0 left-0 bottom-0 right-align border-right pre"></pre>
      <pre id="results"
        contentEditable="true"
        style="padding-left:24px;"
        class="absolute top-0 right-0 bottom-0 left-0 pre bg-aqua muted"></pre>
      <pre id="pre"
        class="relative pre "
        style="padding-left:24px; height:60vh"
        contentEditable="true"></pre>
    </div>

    <pre id="mirror" class="display-none h5 flex-auto  m0 bg-yellow outline"></pre>
  </div>

  <button id="go-button" class="display-none button">Go</button>

  <script>

    var pre = document.querySelector('#pre');
    var mirror = document.querySelector('#mirror');
    var results = document.querySelector('#results');
    var btn = document.querySelector('#go-button');
    var linos = document.querySelector('#linos');

    function process(e) {
      var html = pre.innerHTML;
      html = html.replace(/<div>/g, '\n<div>');
      mirror.innerHTML = html;
      var text = mirror.textContent || mirror.innerText;
      var lines = text.split('\n');
      results.innerHTML = lines.map(renderLine).join('');
      linos.innerHTML = renderLinos(lines.length);
        //rerender.innerHTML = mirror.innerHTML.replace(/\n/g, '');
    }

    function renderLine(line, i) {
      var warn = false;
      var find = 'derp';
      var match = new RegExp(find, 'g');
      if (line.match(match)) {
        warn = '!';
        line = line.replace(match, '<span class="xred bg-red">' + find + '</span>');
      }
      var str = [
        '<div class="' + (warn ? 'xyellow bg-yellow' : 'xwhite') + '">',
          '<span class="" style="padding:0">' + line + ' </span>',
          //'<span' + (warn ? ' class="red"' : '') + '>' + i + '</span>',
          warn ? '<span class="inline-block white bg-red px1">' + warn + '</span>' : '',
        '</div>'
      ].join('');
      return str;
    }

    function renderLinos(length) {
      var html = [];
      for (var i = 1; i < length + 1; i++) {
        html.push('<div style="padding-right:2px">' + i + '</div>');
      }
      return html.join('');
    }

    pre.addEventListener('keyup', process);
    //results.addEventListener('keyup', process);
    //btn.addEventListener('click', process);

  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="author" content="">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/bassdock/1.3.6/bassdock.min.css">
	<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">
	<style>
	.bb{box-sizing:border-box}
	.outline * { outline: 1px solid rgba(255,0,127,.5) }
	pre {
	border-radius: 0;
	padding: 0;
	}
	.pre {
	padding: 0;
	margin: 0;
	background-color: transparent;
	}
	.pre:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(0,127,255,.5);
	}
	</style>
	</head>
	<body class="bb px3">

	<h1 class="bb">editable-pre</h1>

	<div class="border">
	<div class="relative">
	<pre id="linos"
	style="width:24px"
	class="absolute top-0 left-0 bottom-0 right-align border-right pre"></pre>
	<pre id="results"
	contentEditable="true"
	style="padding-left:24px;"
	class="absolute top-0 right-0 bottom-0 left-0 pre bg-aqua muted"></pre>
	<pre id="pre"
	class="relative pre "
	style="padding-left:24px; height:60vh"
	contentEditable="true"></pre>
	</div>

	<pre id="mirror" class="display-none h5 flex-auto m0 bg-yellow outline"></pre>
	</div>

	<button id="go-button" class="display-none button">Go</button>

	<script>

	var pre = document.querySelector('#pre');
	var mirror = document.querySelector('#mirror');
	var results = document.querySelector('#results');
	var btn = document.querySelector('#go-button');
	var linos = document.querySelector('#linos');

	function process(e) {
	var html = pre.innerHTML;
	html = html.replace(/<div>/g, '\n<div>');
	mirror.innerHTML = html;
	var text = mirror.textContent \|\| mirror.innerText;
	var lines = text.split('\n');
	results.innerHTML = lines.map(renderLine).join('');
	linos.innerHTML = renderLinos(lines.length);
	//rerender.innerHTML = mirror.innerHTML.replace(/\n/g, '');
	}

	function renderLine(line, i) {
	var warn = false;
	var find = 'derp';
	var match = new RegExp(find, 'g');
	if (line.match(match)) {
	warn = '!';
	line = line.replace(match, '<span class="xred bg-red">' + find + '</span>');
	}
	var str = [
	'<div class="' + (warn ? 'xyellow bg-yellow' : 'xwhite') + '">',
	'<span class="" style="padding:0">' + line + ' </span>',
	//'<span' + (warn ? ' class="red"' : '') + '>' + i + '</span>',
	warn ? '<span class="inline-block white bg-red px1">' + warn + '</span>' : '',
	'</div>'
	].join('');
	return str;
	}

	function renderLinos(length) {
	var html = [];
	for (var i = 1; i < length + 1; i++) {
	html.push('<div style="padding-right:2px">' + i + '</div>');
	}
	return html.join('');
	}

	pre.addEventListener('keyup', process);
	//results.addEventListener('keyup', process);
	//btn.addEventListener('click', process);

	</script>

	</body>
	</html>