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

回答

相關問題