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/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare/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?
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?
Share Improve this question edited Jul 1, 2015 at 21:09 glampert asked Jul 1, 2015 at 4:13 glampertglampert 4,4113 gold badges24 silver badges50 bronze badges4 Answers
Reset to default 12This worked for me
.hljs {
white-space: pre;
overflow-x: auto;
}
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.
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; }
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;
}