Syntax Highlighter Scrollbars Problem

CODING

Syntax Highlighter is a fully functional self-contained code syntax highlighter in JavaScript developed by Alex Gorbatchev (http://alexgorbatchev.com/SyntaxHighlighter/) 
 
In our previous articles we described how to integrate Syntax Highlighter into SilverStripe CMS and how to remove green icon in Syntax Highligher.
 
However, many users reported that some browsers (Chromium, Firefox...) have problems with displaying scrollbars in Syntax Highligher.

- Advertisement -

In this article we'll describe steps for fixing issues with horizontal and vertical scrollbars in SyntaxHiglighter.
 
1) Changing shCore.css file
 
Open file shCore.css
 
Change the line:

line-height: 1.1em !important;

to

line-height: 1.2em !important;

2) Changing shThemeDefault.css file
 
Open file shThemeDefault.css, find class .syntaxhighlighter and add the following line:

padding: 1px !important;

The final CSS class should look like:

.syntaxhighlighter {
    width: 100% !important;
    margin: 1em 0 1em 0 !important;
    position: relative !important;
    overflow: auto !important;
    font-size: 1em !important;
    padding: 1px !important;
}

These steps will prevent displaying scrollbars when they are not necessary in Syntax Highlighter in some browsers.
 
Note: The changes are tested in Syntax Highlighter version 3.0.83

- Advertisement -
- Advertisement -