React中的Prism.js html示例

Question

因此，我正在为我们正在研究的站点切换一个内部样式指南，从常规html转换到使用reactjs。我有示例代码，我在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>
    );
  }      
});

演示在这里。

唯一的不足是缩进。

Answer 2

优先：使用ReactDOMServer.renderToStaticMarkup将组件呈现为字符串

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

在之后使用JS增白剂美化字符串

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>