title: Show source code next to contentEditable div
body: <p>Right now, I'm trying to create a WYSIWYG HTML editor, and I need to display the source code of a contentEditable div next to the div that is being edited. I'm trying to automatically synchronize these two elements, and I'm not yet sure what the best approach would be.</p>
  
  <pre><code>&lt;div contentEditable ="true" id = "showSourceCodeForThis"&gt;test 1&lt;/div&gt;
  &lt;input type = "text" id = "showSourceCodeHere"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>Whenever the contentEditable div is updated, I want the displayed source code to be automatically updated as well, and vice-versa. Is it possible to synchronize the contents of a contenteditable div with a text box that shows the source code of the contenteditable div?</p>