title: Highlight syntax in contenteditable
body: <p>I have a contenteditable div I want users to type in. When users type inside the box with onkeyup, I activate a function that changes the color of certain characters:</p>
  
  <pre><code>var lTags = fixedCode.innerHTML.replace(/&amp;lt;/gi, "&lt;span style='color:gold;'&gt;&amp;lt;&lt;/span&gt;");
  var rTags = lTags.replace(/&amp;gt;/gi, "&lt;span style='color:gold'&gt;&amp;gt;&lt;/span&gt;");
  fixedCode.innerHTML = rTags;
  </code></pre>
  
  <p>What this code does is it takes every &lt; sign and every > sign and turns it into a gold color. However, when I do this, I am no longer able to type words into the contenteditable box since the box refreshes itself every time I press a key. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function checkIt(code) {
     var fixedCode = document.getElementById(code);
     var lTags = fixedCode.innerHTML.replace(/&amp;lt;/gi, "&lt;span style='color:gold;'&gt;&amp;lt;&lt;/span&gt;");
     var rTags = lTags.replace(/&amp;gt;/gi, "&lt;span style='color:gold'&gt;&amp;gt;&lt;/span&gt;");
     fixedCode.innerHTML = rTags;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box" contenteditable="true" onkeyup="checkIt(this.id);"&gt;See for yourself&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To see for yourself, try typing any HTML tag in the box.
  First of all, why does it change the color of the left <code>&lt;</code> of a tag but not the right part of the tag <code>&gt;</code>? And how can I actually type inside the box without deleting the color-changing stuff. I've seen similar questions, but the answers were Jquery. <strong><em>I do not want to use JQUERY!</em></strong></p>