Highlight.js with Blogger: can't disable auto line wrap

Y

4

14

I'm trying to integrate Highlight.js with Blogger. So far, the syntax highlighting works great, but I can't seem to find a way of preventing the code lines inside the <pre><code> elements to wrap automatically. What I need instead is for the browser to display a horizontal scroll bar.

I have added the following to the blog template, at the end of <head>, as explained in the site:

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'/>
<script type='text/javascript'>
    hljs.initHighlightingOnLoad();
</script>

And all my usage instances are:

<pre><code class='cpp'>
   // code here; 'class' changed according to language.
</code></pre>

I have tried to edit the Highlight.js CSS file to no avail. I have also tried setting the pre and code styles overflow-x property to scroll with no change whatsoever. My guess is that Blogger overwrites that property globally.

Does anyone know of a way to overcome this and avoid the code lines from wrapping/breaking at the end of the code area, showing the horizontal scroll bar instead?

Yate answered 1/7, 2015 at 4:13 Comment(0)

Y

9

After opening this issue on the GitHub page, the author confirmed that the line wrapping was not done by his scripts.

After that, I did some more fiddling in the CSS and was able to fix the problem by overriding the .hljs style of highlight.js. This was the only way I've managed to prevent the text wrap and allow scrolling. It is probably not the best or only fix, but that's as far as my knowledge of CSS goes. Following is the code I've added to the Blogger template.

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

I've changed display to inline-block and added overflow-x: scroll and padding-right: 100%. The padding seems to prevent the code area from shrinking to the size of the longest line of text.

Yate answered 1/7, 2015 at 21:8 Comment(2)

Didn't work for me. Please check that you answer exactly matches your html page. Is your page public? In that case, a url would be great. Thanks! – Diluvium 19/11, 2015 at 10:21

Hi @LarryK. Unfortunately I no longer use Blogger, so that page is gone, I can't check. One of the reasons I dropped it was indeed because I wanted finer control over the HTML/CSS. The issues were with display and overflow properties, I'm sure of that. I suggest that you try tweaking those parameters with your browser's live CSS editor in the developer tools menu. It's a lot easier to debug this kind of problems that way. – Yate 19/11, 2015 at 14:15

V

12

This worked for me

.hljs {
    white-space: pre;
    overflow-x: auto;
}

Votaw answered 6/12, 2016 at 16:12 Comment(0)

Y

9

After opening this issue on the GitHub page, the author confirmed that the line wrapping was not done by his scripts.

After that, I did some more fiddling in the CSS and was able to fix the problem by overriding the .hljs style of highlight.js. This was the only way I've managed to prevent the text wrap and allow scrolling. It is probably not the best or only fix, but that's as far as my knowledge of CSS goes. Following is the code I've added to the Blogger template.

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

I've changed display to inline-block and added overflow-x: scroll and padding-right: 100%. The padding seems to prevent the code area from shrinking to the size of the longest line of text.

Yate answered 1/7, 2015 at 21:8 Comment(2)

Didn't work for me. Please check that you answer exactly matches your html page. Is your page public? In that case, a url would be great. Thanks! – Diluvium 19/11, 2015 at 10:21

Hi @LarryK. Unfortunately I no longer use Blogger, so that page is gone, I can't check. One of the reasons I dropped it was indeed because I wanted finer control over the HTML/CSS. The issues were with display and overflow properties, I'm sure of that. I suggest that you try tweaking those parameters with your browser's live CSS editor in the developer tools menu. It's a lot easier to debug this kind of problems that way. – Yate 19/11, 2015 at 14:15

C

2

One thing I did that solved the problem was to set the width of the hljs element to be very large. This isn't an optimal solution, but it works.

.hljs { width: 2300px; }

Calces answered 6/1, 2016 at 22:30 Comment(0)

C

0

Customize .hljs style from github.css and place it after github.css in your pages.

.hljs {
  display: inline-block;
  white-space: pre;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}

Charleen answered 6/11, 2017 at 8:7 Comment(0)

Recommended topics

Hot tags