Automatic line break in js SyntaxHighlighter

Question

Im using the js SyntaxHighlighter 3.0.83 from http://alexgorbatchev.com/SyntaxHighlighter/

I've been googling the entire world now it seem but cant really find how to enable line breaks. Instad i get a horizontal scrollbar, which is good sometimes but not in my scenario.

In example

Anyone out there who know the way around this?

Ripon

Answer 1

I don't actually use SyntaxHighlight, but it seems to be possible to attach an white-space: pre-wrap CSS style to the <pre> or <script> tag that SyntaxHighlight uses.

HTML (using <pre>):

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

HTML (using <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;
}

Supersedure

Thanks but that's exactly whats causing the scrollbar to appear! – Ripon

word-wrap: normal won't work for <PRE> elements. Use white-space: pre-wrap instead for those: pre.syntaxhighlight { white-space: pre-wrap }. – Frae

@Mike Samuel How about for the <script> element? – Supersedure

That works for firefox, but safari and chrome is still troublesome – Ripon

@mc10, There's no point in applying styles to <script> elements since they have no visible content. You need to apply the styles to whatever syntaxhighlight turns them into. – Frae

Answer 2

The wrap is no longer an option but you can add the functionality easily.

Add this to the css to break the lines

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

To fix the line numbering use the script below.

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

Woodborer

Can you please clarify where exactly the JS needs to go? Does this need to go in each shBrush*.js that this needs to be done in? or can this be placed in shCore.js? – Leathaleather

No just place it with the rest of your own JS. As long as its after you included the Syntax Highlighter files it should do the trick. – Woodborer

Awesome. Yes. This should be cleaned up and integrated in a Wordpress-y way into the plugin by default imho. – Wiggle