Автоматический разрыв строки в js СинтаксисHighlighter

Im, используя js SyntaxHighlighter 3.0.83 из http://alexgorbatchev.com/SyntaxHighlighter/

Я сейчас искал весь мир, но, похоже, не смог найти, как включить разрывы строк. Instad я получаю горизонтальную полосу прокрутки, которая иногда бывает хорошей, но не в моем сценарии.

В примере

Кто-нибудь, кто знает об этом?

Ответ 1

Я действительно не использую SyntaxHighlight, но кажется, что можно прикрепить стиль white-space: pre-wrap CSS к тегу <pre> или <script>, который использует SyntaxHighlight.

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

Ответ 2

Обертка больше не является вариантом, но вы можете легко добавить функциональность.

Добавьте это в css, чтобы сломать строки

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

Чтобы исправить нумерацию строк, используйте script ниже.

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