如何将自动换行 属性 添加到 SyntaxHighlighter Evolved v.3x

Question

我正在使用 SyntaxHighlighter Evolved v.3x 在 Wordpress 上突出显示我的代码。在 v.3x 版本中不支持自动换行。我怎样才能做到文字包装？我不得不使用 v.3x 因为我讨厌 flash。我篡改了一些代码，但我什么也得不到。

Answer 1

当您使用 Syntaxhighlighter Evolved 插件时，它实际上会为您生成一个 HTML 代码，如下所示：

<div id="highlighter_810026" class="syntaxhighlighter php">
   <table cellspacing="0" cellpadding="0" border="0">
      <tbody>
         <tr>
            <td class="gutter">
               <div class="line number1 index0 alt2">1</div>
               <div class="line number2 index1 alt1">2</div>
               <div class="line number3 index2 alt2">3</div>
               <div class="line number4 index3 alt1">4</div>
               <div class="line number5 index4 alt2">5</div>
               <div class="line number6 index5 alt1">6</div>
               <div class="line number7 index6 alt2">7</div>
               <div class="line number8 index7 alt1">8</div>
               <div class="line number9 index8 alt2">9</div>
               <div class="line number10 index9 alt1">10</div>
               <div class="line number11 index10 alt2">11</div>
               <div class="line number12 index11 alt1">12</div>
               <div class="line number13 index12 alt2">13</div>
               <div class="line number14 index13 alt1">14</div>
               <div class="line number15 index14 alt2">15</div>
            </td>
            <td class="code">
               <div class="container">
                  <div class="line number1 index0 alt2"><code class="php comments">// I hope that the description of the switch statement example goes over two and maybe three lines.</code></div>
                  <div class="line number2 index1 alt1"><code class="php keyword">switch</code> <code class="php plain">(</code><code class="php variable">$editon</code><code class="php plain">) {</code></div>
                  <div class="line number3 index2 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">case</code> <code class="php string">"free"</code><code class="php plain">:</code></div>
                  <div class="line number4 index3 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php functions">echo</code> <code class="php string">"It is free. You can't do much in the free plan."</code><code class="php plain">;</code></div>
                  <div class="line number5 index4 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">break</code><code class="php plain">;</code></div>
                  <div class="line number6 index5 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">case</code> <code class="php string">"pro"</code><code class="php plain">:</code></div>
                  <div class="line number7 index6 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php functions">echo</code> <code class="php string">"It is a professional edition."</code><code class="php plain">;</code></div>
                  <div class="line number8 index7 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">break</code><code class="php plain">;</code></div>
                  <div class="line number9 index8 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">case</code> <code class="php string">"ult"</code><code class="php plain">:</code></div>
                  <div class="line number10 index9 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php functions">echo</code> <code class="php string">"It is an ultinate edition."</code><code class="php plain">;</code></div>
                  <div class="line number11 index10 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">break</code><code class="php plain">;</code></div>
                  <div class="line number12 index11 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">default</code><code class="php plain">:</code></div>
                  <div class="line number13 index12 alt2"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php functions">echo</code> <code class="php string">"It is a trial edition."</code><code class="php plain">;</code></div>
                  <div class="line number14 index13 alt1"><code class="php spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="php keyword">break</code><code class="php plain">;</code></div>
                  <div class="line number15 index14 alt2"><code class="php plain">}</code></div>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

结果截图如下：

当你分析代码时，你会看到gutter class 中的行号和container class 中的行号是相同的。因此，当您等于行高时，问题将得到解决。为此，我找到了如下解决方案：

jQuery(window).on('load', function() {
    jQuery(".syntaxhighlighter .gutter .line").each(function(index, element) {
        var divs = jQuery('.code .container .line');
        jQuery(this).attr("style", "height:" + divs.eq(index).height() + "px!important;");
    });
});

我建议您将代码放在主题中的可自定义 javascript 文件中，这样它就不会受到更新的影响。

结果截图如下：

不知道有没有更好的解决办法。但是问题似乎来自创建一个单独的 guter class。相反，最好在 container class 中添加行号。但我不知道这有多难。不过结果好像问题解决了