Prism.js html examples in React

Question

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:

var Example = React.createClass({
    render: function() {
        return (
          <div class="highlight">
              <pre>
                 <code class="language-markup">
                     &lt;label class=&quot;select&quot;&gt;
                     &lt;select class=&quot;selector&quot;&gt;
                            &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                            &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                            &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                            &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
                            &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
                         &lt;/select&gt;
                     &lt;/label&gt;
                 </code>
             </pre>
         </div>
    );
  }      
});

React.render(<Example />, document.getElementById('example'));

When it renders it looks like this.

<label class="select"><select class="selector"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></label>

But I expect it to look like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet"/>
<div class="highlight">
                  <pre>
                     <code class="language-markup">
                         &lt;label class=&quot;select&quot;&gt;
                         &lt;select class=&quot;selector&quot;&gt;
                                &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                                &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                                &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                                &lt;option value=&quot;4&quot;&gt;4&lt;/option&gt;
                                &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
                             &lt;/select&gt;
                         &lt;/label&gt;
                     </code>
                 </pre>
             </div>

Anyone know of a way to preserve the line breaks?

Answer 1

You can just code like this:

var Example = React.createClass({
    render: function() {
        return (
          <div class="highlight">
              <pre>
                 <code class="language-markup">
                 {`
                <label class="select">
                <select class="selector">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                 </select>
                </label>
                 `}
                 </code>
             </pre>
         </div>
    );
  }      
});

Demo is here.

The only shortage is the indent.

Answer 2

First: Use ReactDOMServer.renderToStaticMarkup to render component to string

var inner = ReactDOMServer.renderToStaticMarkup(
    <label className="select">
        ...
    </label>
);

After Use JS Beautifier to prettify your string

inner = html_beautify(inner);

Finnaly Insert it to your code as string

<code className="language-markup">
   {inner}
</code>

Url: http://jsfiddle.net/ohwz5ry2/2/