twenty eight twelve

Using highlight.js with WordPress' Twenty Fifteen theme

I've recently switched over to using highlight.js for my code highlighting on my blog mainly because it supports Elixir syntax highlighting.

Out of the box, running highlight.js with the WorPress Twenty Fifteen theme causes lines of code to wrap.

I wanted lines to run continuously with a scroll bar.

The following css tweaks did it for me:

pre {
    border: 0;
    padding: 0;
    white-space: pre;
    overflow-wrap: normal;
}
code {
    overflow-x: scroll;
}

Your mileage may vary, but some quick tests seem to show this working reasonably well.

Of course you might not want to override the pre tag completely and instead push the changes into a class to apply to any pre tags wrapping your code.

And you'll want to rig this up into a child theme so you don't jettison your code when you run an update.