Prism.js html примеры в React

Question

Итак, я перехожу к руководству по внутреннему стилю для сайта, над которым мы работаем, из обычного html, чтобы использовать responsejs. У меня есть пример кода, и я использую выделение с помощью prism.js. Выделение, кажется, работает нормально, но разрывов строк нет. Даже вставка в теги br после каждой строки не влияет. У кого-нибудь есть мысли по этому поводу? Просто несколько примеров кода:

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')); 

Когда он делает это выглядит следующим образом.

<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> 

Но я ожидаю, что это выглядит следующим образом:

<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>

Любой знает, как сохранить разрывы строк?

Answer 1

Вы можете просто следующий код:

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.

Единственный недостаток является отступа.

Answer 2

Первое: Использование ReactDOMServer.renderToStaticMarkup для визуализации компонент в строку

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

После использования JS Beautifier приукрасить вашу строку

inner = html_beautify(inner); 

Finnaly Вставьте его в код в виде строки

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

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

Answer 3

Просто дайте детям подобное, и это будет работать как шарм.

<pre> 
    <code class="language-markup"> 
     {` 
     .ui-datatable table { 
      border-collapse:collapse; 
      width: 100%; 
      table-layout: fixed; 
     } 

     `} 
    </code> 
</pre>