CODEWITHSUNDEEP
javascriptcsssyntax-highlightingbloggerhighlight.js
glampert
glampert

Reputation: 4411

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

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?

Upvotes: 14

Views: 7855

Answers (4)

Arnav Rao
Arnav Rao

Reputation: 7002

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

Upvotes: 0

Steven O&#39;Brien
Steven O&#39;Brien

Reputation: 146

This worked for me

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

Upvotes: 12

will.fiset
will.fiset

Reputation: 1572

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

Upvotes: 2

glampert
glampert

Reputation: 4411

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.

Upvotes: 9

Related Questions