Как добавить свойство переноса слов в SyntaxHighlighter Evolved v.3x

Когда вы используете плагин 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. Но я не знаю, насколько это тяжело. Но в результате проблема кажется решенной.