Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Highlight.js on Blogger wraps code lines automatically

See original GitHub issue

At the moment I’m facing an issue integrating highlight.js with Blogger. The syntax highlight works great, but the text lines inside the pre/code tags are auto wrapping. Is this the intended behavior? If yes, can we have an option to show a horizontal scroll bar instead? Looking at the demo page I can see that some examples have a scroll bar, so I’m guessing this is a problem with Blogger instead.

I have also opened a StackOverflow question about this, so far unanswered.

Following is a screenshot of the problem I’m facing. As you can see, the code gets quite unreadable with the line wrapping:

sample

Issue Analytics

State:
Created 8 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

6reactions

ElectricRCAircraftGuycommented, Jul 27, 2020

Ah-ha-ha! Nice! Thanks guys! I do want my code blocks to wrap on Google Blogger, instead of having the scroll-bar, so looking at these posts here I was able to determine I needed to add the following to force it to wrap my code with highlight.js syntax highlighting!

Add this between the <head> </head> tags at the top of the blogger theme to affect the whole website, or just to the top of a given blog post to affect that page only:

<style>
pre, code {
    white-space: pre-wrap;
}
</style>

pre-wrap forces the lines to wrap when necessary, while otherwise preserving code-formatting white-space. See here: https://www.w3schools.com/cssref/pr_text_white-space.asp.

pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

6reactions

glampertcommented, Jul 1, 2015

Following your suggestion, I did some more fiddling with the CSS and was able to fix the problem by overriding the .hljs style, just after including the highlight.js stylesheet. Probably not the only or best fix, but this was the only one I’ve been able to get right. My knowledge of the Blogger API or CSS in general is limited, so the reasons it worked are also not quite clear to me.

For future reference, in case you are interested on further investigating the matter to perhaps incorporate that to the library, this is how my highlight.js include is (at the end of <head>):

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<style type='text/css'>
    pre, code {
        white-space: pre;
        overflow-x: scroll;
    }
    .hljs {
        display: inline-block;
        overflow-x: scroll;
        padding: 0.5em;
        padding-right: 100%;
        background: #002b36;
        color: #839496;
        -webkit-text-size-adjust: none;
    }
</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'></script>
<script type='text/javascript'>
    hljs.initHighlightingOnLoad();
</script>

Many thanks for the help and for the great work you did in this project. Cheers.