Highlight.js: useBR doesn't work for me

[starikovs]

I use highlight.js to highlight code syntax on a web page. I don't use <pre><code> but instead I use custom tag <div class="code"> and I set useBr to use <br> instead of new lines. But it doesn't work for me..

http://jsfiddle.net/s0gyounj/

[sourrust]

It should be fixed now in master. Thanks for reporting this bug.

[starikovs]

Oh, thank you very much for the fix!

[isagalaev]

Wait a moment, that's not how it's supposed to work.

What useBR actually means is that the original source uses <br> for line breaks instead of \n symbols and that they should be retained after highlighting. In this case the original code doesn't have <br> tags:

<div class="code">
    &lt;script&gt;
        console.log("Hello, World!");
    &lt;/script&gt;
</div>

With no scripting applied a browser is going to display this as one line and highlight.js simply follows that behavior. If you want line breaks in this code you should provide <br>s too:

<div class="code">
    &lt;script&gt;<br>
        console.log("Hello, World!");<br>
    &lt;/script&gt;<br>
</div>

The part replace(/\n/g, '') that @sourrust removed is actually there for a reason because without it line breaks will be doubled in the end result.

[isagalaev]

I've brought back that .replace(...) and reworked tests to better show the intention of this option.

[starikovs]

Ok, now I understand.. Maybe it's because the description on the site:

If you don't use a container that preserve line breaks you will need to configure highlight.js to use the <br> tag

I just didn't understand that the source should have these BRs too..

[tl3shi]

When I read the documentation:

If you don't use a container that preserve line breaks you will need to configure highlight.js to use the <br> tag

I also just do not understand that the source should have these BRs too.

[tl3shi]

I found another problem, when not using a container that preserve line breaks, the indention in the code won't work.
Here is an example: (I want to use another special tag to enable highlight without <pre> tag )

    test0
    <cc lang="php">
    $domain = $_SERVER['HTTP_HOST'];
    if ($domain == 'm.tanglei.name')
         $_SERVER['HTTP_USER_AGENT']='tanglei'; //跟wptouch admin后台设置的一样即可
    </cc>
    test1
    <cc lang="python">
    '''
    Created on Mar 9, 2012
    @author: tanglei|www.tanglei.name
    '''
    import traceback
    class A(object):
        def __new__(self):
            print("new  A,has not return")
        def __init__(self):
            print("init in A")
        def cal(self,num):
            print(num+1)
    try: #if not try ,catch,the program will terminate
        t=A()
        t.cal(89)
    except :
        traceback.print_exc()
    </cc>

    the default configuration should not work.
    <pre>
    <code class="php">
    $domain = $_SERVER['HTTP_HOST'];
    if ($domain == 'm.tanglei.name')
         $_SERVER['HTTP_USER_AGENT']='tanglei'; //跟wptouch admin后台设置的一样即可
    <code>
    </pre>

The following script uses the special tag <cc> to enable highlight.js

$(document).ready(function() {
            hljs.configure({useBR: true});//this does NOT work, the original code should contains <br>, see https://github.com/isagalaev/highlight.js/issues/860
            $('cc').each(function(){
                var codestr = $(this).html();
                $(this).html(codestr.replace(/\n/g, '<br>')); //manually substitute
            });
            $('cc').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        });
    </script>

The result is:

Hope you @isagalaev @sourrust can help me, thank you.

[isagalaev]

@tl3shi in HTML both spaces and line-breaks are just whitespace, they're collapsed to a single space visually. So if you want to use a non <pre> container for code you have two options:

• use <br> tags for line-breaks _and_   escapes for non-collapsible spaces
• use CSS { white-space: pre; } for your custom containers to make it behave like <pre>

The second option is by far easier and recommended. The purpose of useBR in highlight.js is to support some old forum software that already does the <br>/  formatting for code blocks that can't be switched off.