title: Prism.js html examples in React
body: <p>So I'm switching an internal style guide for a site we're working on from regular html to use reactjs. I've got example code and I'm using highlighting with prism.js. The highlighting seems to work fine, but line breaks don't. Even putting in br tags after every line has no effect. Anyone have any thoughts on this?
  Just some example code:</p>
  
  <pre><code>var Example = React.createClass({
      render: function() {
          return (
            &lt;div class="highlight"&gt;
                &lt;pre&gt;
                   &lt;code class="language-markup"&gt;
                       &amp;lt;label class=&amp;quot;select&amp;quot;&amp;gt;
                       &amp;lt;select class=&amp;quot;selector&amp;quot;&amp;gt;
                              &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;1&amp;lt;/option&amp;gt;
                              &amp;lt;option value=&amp;quot;2&amp;quot;&amp;gt;2&amp;lt;/option&amp;gt;
                              &amp;lt;option value=&amp;quot;3&amp;quot;&amp;gt;3&amp;lt;/option&amp;gt;
                              &amp;lt;option value=&amp;quot;4&amp;quot;&amp;gt;4&amp;lt;/option&amp;gt;
                              &amp;lt;option value=&amp;quot;5&amp;quot;&amp;gt;5&amp;lt;/option&amp;gt;
                           &amp;lt;/select&amp;gt;
                       &amp;lt;/label&amp;gt;
                   &lt;/code&gt;
               &lt;/pre&gt;
           &lt;/div&gt;
      );
    }      
  });
  
  React.render(&lt;Example /&gt;, document.getElementById('example'));
  </code></pre>
  
  <p>When it renders it looks like this.</p>
  
  <pre><code>&lt;label class="select"&gt;&lt;select class="selector"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;/select&gt;&lt;/label&gt;
  </code></pre>
  
  <p>But I expect it to look like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet"/&gt;
  &lt;div class="highlight"&gt;
                    &lt;pre&gt;
                       &lt;code class="language-markup"&gt;
                           &amp;lt;label class=&amp;quot;select&amp;quot;&amp;gt;
                           &amp;lt;select class=&amp;quot;selector&amp;quot;&amp;gt;
                                  &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;1&amp;lt;/option&amp;gt;
                                  &amp;lt;option value=&amp;quot;2&amp;quot;&amp;gt;2&amp;lt;/option&amp;gt;
                                  &amp;lt;option value=&amp;quot;3&amp;quot;&amp;gt;3&amp;lt;/option&amp;gt;
                                  &amp;lt;option value=&amp;quot;4&amp;quot;&amp;gt;4&amp;lt;/option&amp;gt;
                                  &amp;lt;option value=&amp;quot;5&amp;quot;&amp;gt;5&amp;lt;/option&amp;gt;
                               &amp;lt;/select&amp;gt;
                           &amp;lt;/label&amp;gt;
                       &lt;/code&gt;
                   &lt;/pre&gt;
               &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone know of a way to preserve the line breaks?</p>