Removing SyntaxHighlighter Scrollbars In Chrome

December 13, 2012  |  1 minute to read


Heads up! This is an old post - it may contain out-of-date information!

I use the SyntaxHighlighter JavaScript library by Alex Gorbatchev on this site my previous site to auto-format chunks of code, resulting in nicely colored and tabulated blocks of text like this:

$.fn.dynamicInput = function(method) {
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.dynamicInput');
    }
};

It’s a fantastic tool. Unfortunately, Chrome surrounds each block of code with vertical scrollbars, regardless of the content’s length.

Some code with a scrollbar and a sad face next to it

Luckily, fixing this issue is a breeze. Simply change line 35 in shCore.css from this:

line-height: 1.1em;

to this:

line-height: 1.2em;

This will remove the unnecessary vertical scrollbars in Chrome and allow for consistent formatting across all major browsers.

You can find shCore.css in the syntaxhighlighter_X.X.XX/styles directory.


Other posts you may enjoy:

The Next Chapter

December 4, 2018  |  Less than 1 minute to read

ES6 Object Literal Shorthand Is Fun And Kind Of Scary

November 16, 2018  |  1 minute to read

Shell-ing With TypeScript

June 17, 2018  |  2 minutes to read

My First "Hello, World!"

June 7, 2018  |  5 minutes to read

Live Reloading An Angular 2+ App Behind NGINX

May 14, 2018  |  4 minutes to read