title: Safely inject html string into <pre> tag keeping syntax highlighting intact
body: <p>I have <code>string</code> containing <code>json</code> data built dynamically with some <code>html</code> inserted for syntax highlighting.<br/></p>
  
  <pre><code>console.log(highlightedJson);
  {
      &lt;span class="key"&gt;"time":&lt;/span&gt; &lt;span class="string"&gt;"11:09:09 PM"&lt;/span&gt;,
      &lt;span class="key"&gt;"milliseconds_since_epoch":&lt;/span&gt; &lt;span class="number"&gt;1406070549038&lt;/span&gt;,
      &lt;span class="key"&gt;"date":&lt;/span&gt; &lt;span class="string"&gt;"07-22-2014"&lt;/span&gt;
  }
  </code></pre>
  
  <p>Styling to be applied to classes:</p>
  
  <pre><code>pre {
      outline: 1px solid #ccc; 
      padding: 5px; 
      margin: 5px; 
      white-space: pre-wrap;       
      white-space: -moz-pre-wrap;  
      white-space: -pre-wrap;      
      white-space: -o-pre-wrap;    
      word-wrap: break-word;       
  }
  .string { color: green; }
  .number { color: darkorange; }
  .boolean { color: blue; }
  .null { color: magenta; }
  .key { color: red; }
  </code></pre>
  
  <p>Trying to inject this as <code>html</code> into a <code>&lt;pre&gt;</code> dom element ..</p>
  
  <pre><code>var pre = document.createElement('pre');
  
  // also tried this, but again, syntax highlighting is not rendered
  //pre.appendChild(highlightedJson));
  
  pre.appendChild(document.createTextNode(highlightedJson))
  document.getElementById("body").appendChild(pre);
  </code></pre>
  
  <p>When this code runs, the string is appended to <code>&lt;pre&gt;</code>, but syntax highlighting is not showing.<br/></p>
  
  <ul>
  <li>I know using <code>pre.innerHTML = highlightedJson;</code> gets the result I'm after but this html injection method is discouraged in firefox addons.<br/></li>
  <li>Project is not using <code>jquery</code></li>
  </ul>
  
  <p>Can anyone suggest an approach?</p>