Search code examples
htmlwordpresssyntaxhighlighter

Wordpress Syntaxhighlighter -- horizontal scroll bar visibility


I'm using the following code along with the wp-syntaxhighlighter plugin with the optional language pack (e.g., lisp). I would like the horizontal scroll bar to be visible at all times, instead of only at the end of the code block. How, please, can this be accomplished?

<div style="overflow:auto;max-height:400px;width:600px">
  <pre class="brush: lisp; gutter: true">
  CODE GOES HERE
  </pre>
</div>

Example
(source: lawlist.com)

Example
(source: lawlist.com)


EDIT:  Here is a screenshot of the following code: <div style="overflow:auto;max-height:400px;width:600px;overflow-x:scroll;">. Adding overflow-x:scroll; causes a second horizontal scrollbar to appear, but without the blue slider.

Example
(source: lawlist.com)


Solution

  • Based upon the helpful links provided by @ilias, and based upon the helpful comment by @Arjun Chaudhary, the following code resolves the issue:

    <style type="text/css">
      .syntaxhighlighter {
        width: 500px;
        height: 500px;
        overflow-y: auto !important;
        overflow-x: auto !important;}
    </style>
    
    <pre class="brush: lisp">
    
    INSERT-CODE-SNIPPET-HERE
    
    </pre>
    

    OR, modify shCore.css of syntaxhighlighter (aka wp-syntaxhighlighter):

    .syntaxhighlighter {
      width: 500px;
      height: 500px;
      overflow-y: auto !important;
      overflow-x: auto !important;
      margin: 1em 0 1em 0 !important;
      position: relative !important;
      font-size: 1em !important;
    }
    

    Example
    (source: lawlist.com)