如何将自动换行属性添加到 SyntaxHighlighter Evolved v.3x [英] How to Add Word Wrap Propery to SyntaxHighlighter Evolved v.3x

问题描述

我正在使用

当你分析代码时，你会发现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 类中添加行号.但我不知道这有多难.但结果，问题似乎得到了解决.

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.

解决方案

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.

这篇关于如何将自动换行属性添加到 SyntaxHighlighter Evolved v.3x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！