Simple editor example

by Patrick A Lima

HTML

<div id="content-container">
  <div id="temp-render-code"></div>
  <div id="editor-scroller"><div id="lines-content"></div></div>
  <div id="editor-scroller-y"></div>
</div>

CSS

html, body{
  overflow: hidden;
  margin: 0;
  padding: 0;
  display:block;
  height:100%;
}
#content-container {
  width: 100%;
  height: 100%;
  display: block;
}
#editor-scroller {
  overflow: hidden;
  will-change: transform;
  overflow: hidden;
  z-index: 2;
  right: 0;
  position: absolute;
  width: 100%; }
#temp-render-code {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  z-index: -1; }
#temp-render-lines {
  font-size: 16px;
  line-height: 18px;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1; }

#temp-render-lines div {
  display: inline-block; }
#temp-render-code-span {
  display: block;
  width: calc(100% - 16px);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
  padding-right: 16px; }
#editor-scroller-y {
  position: absolute;
  width: 18px;
  overflow-y: auto;
  right: 0px;
  top: 0;
  height: 100%;
  display: inline-block;
  will-change: transform;
  z-index: 4; }
#aquarium-number-lines {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 3; }
.lines-view {
  display: block;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-all;
  width: calc(100% - 16px);
  padding-right: 16px; }

JavaScript

var _code =   "// jqeuery excerpt:\n//       1         2         3         4\n//34567890123456789012345678901234567890\n\/*!\r\n * Sizzle CSS Selector Engine v2.3.0\r\n * https:\/\/sizzlejs.com\/\r\n *\r\n * Copyright jQuery Foundation and other contributors\r\n * Released under the MIT license\r\n * http:\/\/jquery.org\/license\r\n *\r\n * Date: 2016-01-04\r\n *\/\r\n(function( window ) {\r\n\r\nvar i,\r\n\tsupport,\r\n\tExpr,\r\n\tgetText,\r\n\tisXML,\r\n\ttokenize,\r\n\tcompile,\r\n\tselect,\r\n\toutermostContext,\r\n\tsortInput,\r\n\thasDuplicate,\r\n\r\n\t\/\/ Local document vars\r\n\tsetDocument,\r\n\tdocument,\r\n\tdocElem,\r\n\tdocumentIsHTML,\r\n\trbuggyQSA,\r\n\trbuggyMatches,\r\n\tmatches,\r\n\tcontains,\r\n\r\n\t\/\/ Instance-specific data\r\n\texpando = \"sizzle\" + 1 * new Date(),\r\n\tpreferredDoc = window.document,\r\n\tdirruns = 0,\r\n\tdone = 0,\r\n\tclassCache = createCache(),\r\n\ttokenCache = createCache(),\r\n\tcompilerCache = createCache(),\r\n\tsortOrder = function( a, b ) {\r\n\t\tif ( a === b ) {\r\n\t\t\thasDuplicate = true;\r\n\t\t}\r\n\t\treturn 0;\r\n\t},\r\n\r\n\t\/\/ Instance methods\r\n\thasOwn = ({}).hasOwnProperty,\r\n\tarr = [],\r\n\tpop = arr.pop,\r\n\tpush_native = arr.push,\r\n\tpush = arr.push,\r\n\tslice = arr.slice,\r\n\t\/\/ Use a stripped-down indexOf as it\'s faster than native\r\n\t\/\/ https:\/\/jsperf.com\/thor-indexof-vs-for\/5\r\n\tindexOf = function( list, elem ) {\r\n\t\tvar i = 0,\r\n\t\t\tlen = list.length;\r\n\t\tfor ( ; i < len; i++ ) {\r\n\t\t\tif ( list[i] === elem ) {\r\n\t\t\t\treturn i;\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn -1;\r\n\t},\r\n\r\n\tbooleans = \"checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped\",\r\n\r\n\t\/\/ Regular expressions\r\n\r\n\t\/\/ http:\/\/www.w3.org\/TR\/css3-selectors\/#whitespace\r\n\twhitespace = \"[\\\\x20\\\\t\\\\r\\\\n\\\\f]\",\r\n\r\n\t\/\/...