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>
(source: lawlist.com)
(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.
(source: lawlist.com)
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;
}
(source: lawlist.com)