Question

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)

Was it helpful?

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)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top