Wednesday, October 31, 2012

Remove unneded scrollbars from SyntaxHighlighter

Some of you may have noticed that when using SyntaxHighlighter version 3.0.83 there are always vertical and horizontal scroll bars no matter what is the size of the text. To fix this problem you have two options.
  1. Download the shCore.css and change
    .syntaxhighlighter {
      width: 100% !important;
      margin: 1em 0 1em 0 !important;
      position: relative !important;
      overflow: auto !important;
      font-size: 1em !important;
    }
    
    to
    .syntaxhighlighter {
      width: 100% !important;
      margin: 1em 0 1em 0 !important;
      position: relative !important;
      overflow-y: hidden !important;
      overflow-x: auto !important;
      font-size: 1em !important;
    }
    and reference your version of the file.

  2. Add the following style in the head section of your template:
    <style type="text/css">
      .syntaxhighlighter { 
         overflow-y: hidden !important; 
         overflow-x: auto !important; 
      }
    </style>
    

This will show horizontal scroll bar only when needed.

1 comment: