Prism.js html 个 React 示例

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

首先：使用ReactDOMServer.renderToStaticMarkup将组件渲染为字符串

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

After 使用 JS Beautifier 美化你的字符串

inner = html_beautify(inner);

Finnaly 将其作为字符串插入到您的代码中

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

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

Answer 2

你可以这样编码：

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 3

只要像这样给children，它就会像一个魅力。

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

       `}
    </code>
</pre>

Prism.js html 个 React 示例

Prism.js html examples in React

reactjs

react-jsx

prism.js