title: Simple syntax highlighting using javascript
body: <p>Currently I have an editable div and I want to add <em>very basic</em> syntax highlighting. Essentially I want text between * to turn a different color and text in quotes to turn a different color. For example:</p>
  
  <p>input: <code>"hello" *world*</code></p>
  
  <p>output: <code>&lt;span class='a'&gt;"hello"&lt;/span&gt; &lt;span class='b'&gt;*world*&lt;/span&gt;</code></p>
  
  <p>I'm using Rangy.js library to save and restore the caret position so there's no issues there. However I'm really struggling to turn the input into the output. The big problem I have is ignoring any " and * that are already highlighted.</p>
  
  <p>If anyone could point me in the direction of a basic algorithm or regular expression or something it would be much appreciated.</p>