z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
<p>由于我的博客主要是代码分享，很多贴的代码，都很长。很多时候我都是手动给他换行。</p><p>但是今天实在是受不了。从网上找个办法解决一下。</p>
<p>1、css修改：</p>
<p><img style="max-width:100%!important;height:auto!important;"alt="z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)" src="https://zhuji.jb51.net/uploads/img/202305/07b26b185d9f39e855794c9caefaa8a1.jpg" /></p>
<p>在文件夹：\zb_system\ADMIN\ueditor\third-party\SyntaxHighlighter</p>
<p>在文件shCoreDefault.pack.css添加css：</p>
<p></p>
<div><u>复制代码</u> 代码如下:</div>
<div id="code92487"><br />body .syntaxhighlighter .line{ white-space: pre-wrap !important;} .syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;word-break:break-all;</div>
<p></p>
<p>2、Jquery代码：</p>
<div><div><div id="highlighter_140627"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<div>39</div>
<div>40</div>
<div>41</div>
<div>42</div></td><td><div><div><code>$(</code><code>function</code> <code>() { </code></div>
<div><code> </code><code>// Line wrap back </code></div>
<div><code> </code><code>var</code> <code>shLineWrap = </code><code>function</code> <code>() { </code></div>
<div><code> </code><code>$(</code><code>'.syntaxhighlighter'</code><code>).each(</code><code>function</code> <code>() { </code></div>
<div><code> </code><code>// Fetch </code></div>
<div><code> </code><code>var</code> <code>$sh = $(</code><code>this</code><code>), </code></div>
<div><code> </code><code>$gutter = $sh.find(</code><code>'td.gutter'</code><code>), </code></div>
<div><code> </code><code>$code = $sh.find(</code><code>'td.code'</code><code>) </code></div>
<div><code> </code><code>; </code></div>
<div><code> </code><code>// Cycle through lines </code></div>
<div><code> </code><code>$gutter.children(</code><code>'.line'</code><code>).each(</code><code>function</code> <code>(i) { </code></div>
<div><code> </code><code>// Fetch </code></div>
<div><code> </code><code>var</code> <code>$gutterLine = $(</code><code>this</code><code>), </code></div>
<div><code> </code><code>$codeLine = $code.find(</code><code>'.line:nth-child('</code> <code>+ (i + 1) + </code><code>')'</code><code>) </code></div>
<div><code> </code><code>; </code></div>
<div><code> </code><code>//alert($gutterLine); </code></div>
<div><code> </code><code>// Fetch height </code></div>
<div><code> </code><code>var</code> <code>height = $codeLine.height() || 0; </code></div>
<div><code> </code><code>if</code> <code>(!height) { </code></div>
<div><code> </code><code>height = </code><code>'auto'</code><code>; </code></div>
<div><code> </code><code>} </code></div>
<div><code> </code><code>else</code> <code>{ </code></div>
<div><code> </code><code>height = height += </code><code>'px'</code><code>; </code></div>
<div><code> </code><code>//alert(height); </code></div>
<div><code> </code><code>} </code></div>
<div><code> </code><code>// Copy height over </code></div>
<div><code> </code><code>$gutterLine.attr(</code><code>'style'</code><code>, </code><code>'height: '</code> <code>+ height + </code><code>' !important'</code><code>); // fix by Edi, </code><code>for</code> <code>JQuery 1.7+ under Firefox 15.0 </code></div>
<div><code> </code><code>console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine); </code></div>
<div><code> </code><code>}); </code></div>
<div><code> </code><code>}); </code></div>
<div><code> </code><code>}; </code></div>
<div><code> </code><code>// Line wrap back when syntax highlighter has done it's stuff </code></div>
<div><code> </code><code>var</code> <code>shLineWrapWhenReady = </code><code>function</code> <code>() { </code></div>
<div><code> </code><code>if</code> <code>($('.syntaxhighlighter').length === 0) { </code></div>
<div><code> </code><code>setTimeout(shLineWrapWhenReady, 10); </code></div>
<div><code> </code><code>} </code></div>
<div><code> </code><code>else</code> <code>{ </code></div>
<div><code> </code><code>shLineWrap(); </code></div>
<div><code> </code><code>} </code></div>
<div><code> </code><code>}; </code></div>
<div><code> </code><code>// Fire </code></div>
<div><code> </code><code>shLineWrapWhenReady();});</code></div></div></td></tr></tbody></table></div></div></div>
<p>上面的代码就是属于长代码。大家看看是不是都换行了？？</p>
<p>现在，行号的高度就能和代码的高度保持一致了。</p>
頁:
[1]