Menu
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?
359
This worked for me
.hljs {
white-space: pre;
overflow-x: auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
