js SyntaxHighlighter 中的自动换行答案

【问题标题】：Automatic line break in js SyntaxHighlighterjs SyntaxHighlighter 中的自动换行
【发布时间】：2011-09-11 07:39:06
【问题描述】：

我正在使用来自 http://alexgorbatchev.com/SyntaxHighlighter/ 的 js SyntaxHighlighter 3.0.83

我一直在用谷歌搜索整个世界，但现在似乎找不到如何启用换行符。 Instad 我得到了一个水平滚动条，这有时很好，但在我的场景中却不是。

例如

有谁知道解决这个问题的方法吗？

【问题讨论】：

标签： javascript syntaxhighlighter

【解决方案1】：

我实际上并没有使用 SyntaxHighlight，但似乎可以将 white-space: pre-wrap CSS 样式附加到 SyntaxHighlight 使用的 <pre> 或 <script> 标记。

HTML（使用<pre>）：

<pre class="brush: js" class="syntaxhighlight">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

HTML（使用<script>）：

<script type="syntaxhighlighter" class="syntaxhighlight brush: js"><![CDATA[
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
]]></script>

CSS：

.syntaxhighlight {
    white-space: pre-wrap;
}

【讨论】：

谢谢，但这正是导致滚动条出现的原因！
word-wrap: normal 不适用于 <PRE> 元素。使用white-space: pre-wrap 代替：pre.syntaxhighlight { white-space: pre-wrap }。
@Mike Samuel <script> 元素怎么样？
这个对firefox有效，但是safari和chrome还是很麻烦
@mc10，将样式应用于<script> 元素是没有意义的，因为它们没有可见的内容。您需要将样式应用于任何 syntaxhighlight 将它们变成的样式。

【解决方案2】：

包装不再是一种选择，但您可以轻松添加功能。

将此添加到 css 以打破行

body .syntaxhighlighter .line {
        white-space: pre-wrap !important; /* make code wrap */
}

要修复行号，请使用以下脚本。

function lineWrap(){
    var wrap = function () {
        var elems = document.getElementsByClassName('syntaxhighlighter');
        for (var j = 0; j < elems.length; ++j) {
            var sh = elems[j];
            var gLines = sh.getElementsByClassName('gutter')[0].getElementsByClassName('line');
            var cLines = sh.getElementsByClassName('code')[0].getElementsByClassName('line');
            var stand = 15;
            for (var i = 0; i < gLines.length; ++i) {
                var h = $(cLines[i]).height();
                if (h != stand) {
                    console.log(i);
                    gLines[i].setAttribute('style', 'height: ' + h + 'px !important;');
                }
            }
        }
     };
    var whenReady = function () {
        if ($('.syntaxhighlighter').length === 0) {
            setTimeout(whenReady, 800);
        } else {
            wrap();
        }
    };
    whenReady();
};
lineWrap();
$(window).resize(function(){lineWrap()});

【讨论】：

你能澄清一下JS到底需要去哪里吗？这是否需要在需要完成的每个 shBrush*.js 中执行？或者这个可以放在 shCore.js 中吗？
不只是把它和你自己的 JS 的其余部分放在一起。只要在您包含语法荧光笔文件之后，它就可以解决问题。
太棒了。是的。默认情况下，这应该被清理并以 Wordpress-y 的方式集成到插件中。