SyntaxHighlighter | Troubleshooting | How to Fix a Vertical Scroll Bar That Is Always Displayed

Tags:

This article explains how to fix an issue where a vertical scroll bar is always displayed when source code is shown with SyntaxHighlighter.

How to Fix a Vertical Scroll Bar That Is Always Displayed

The way it appears differs depending on the browser you use, but a vertical scroll bar may always be displayed when source code is shown.

To hide the vertical scroll bar, open the currently used shCore.css file or shCoreXXX.css file in a text editor and look for the following content.

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

Because modifying the library file itself can cause problems, it is better to write separate CSS and add the property as follows.

<style>
  .syntaxhighlighter {
    overflow-y : hidden! important;
  }
</style>

Run code

The setup is complete. After adding the property, check how it is displayed. The vertical scroll bar should no longer appear.

Firefox did not show it originally, and I confirmed that it is also hidden in Chrome and IE11.