How to Add Word Wrap Propery to SyntaxHighlighter Evolved v.3x

Question

I am using SyntaxHighlighter Evolved v.3x for highlighting my codes on Wordpress. In v.3x version no support for word wrapping. How can I do it word wrappable? I have to use v.3x because of I hate flash. I tampered with the codes a bit, but I couldn't get anything.

Answer 1

When you use the Syntaxhighlighter Evolved plugin, it actually generates you an HTML code like this:

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

And here is the screenshot of the result:

When you analyze the codes, you will see that the row numbers in the gutter class and the row numbers in the container class are the same. For this reason, the problem will be solved when you equal the line heights. For this, I found a solution like below:

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;");
    });
});

I recommend that you put your code in a customizable javascript file within your theme so that it is not affected by updates.

And here is the screenshot of the result:

I don't know if there is a better solution to this. But the problem seems to arise from creating a separate guter class. Instead, it would be better to add line numbers in the container class. But I don't know how hard this is. But as a result, the problem seems to be resolved.