React中的Prism.js html示例

因此，我正在为正在处理的网站从常规html切换为使用reactjs的内部样式指南。我有示例代码，我用prism.js突出显示。突出显示似乎工作正常，但换行符不。即使在每行之后放入br标签也没有效果。任何人对此有任何想法？只是一些示例代码：React中的Prism.js html示例

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>

任何人都知道的一种方式来保存换行？

来源

2015-04-17 SnareHanger

是这样的吗？ http://jsfiddle.net/wiredprairie/ohwz5ry2/ – WiredPrairie

差不多，但这比我更喜欢的解决方法。如果我不必添加所有换行符，那将是理想的。 – SnareHanger

React按设计折叠空间。 – WiredPrairie

你可以像这样的代码：

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.

唯一不足的是缩进。

来源

2016-03-31 09:20:35

应该在前一段时间标记过，但这是我去的方式 – SnareHanger

第一：使用ReactDOMServer.renderToStaticMarkup渲染组件串

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

后使用JS Beautifier美化您的字符串

inner = html_beautify(inner);

Finnaly它插入到你的代码串

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

地址：http://jsfiddle.net/ohwz5ry2/2/

来源

2015-04-18 06:25:20

您的jsfiddle演示的结果没有换行符。 –

它现在是'ReactDOMServer.renderToStaticMarkup'（从'react-dom/server'包中导入。 –

只要给这样的孩子，它就像魅力一样工作。

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

     `} 
    </code> 
</pre>

来源

2017-01-04 12:12:56

React中的Prism.js html示例

回答

相关问题