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

Question

我正在使用SyntaxHighlighter Evolved v.3x在Wordpress上突出显示我的代码。在v.3x版本中，不支持自动换行。我该如何将其包装成文字？我讨厌Flash，因此必须使用v.3x。我稍微修改了代码，但什么也没收到。

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类中的行号与container类中的行号相同。因此，当您等于线高时，将解决该问题。为此，我找到了如下解决方案：

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类引起的。相反，最好在container类中添加行号。但是我不知道这有多难。但是结果，这个问题似乎已经解决了。