Dynamically Set the SyntaxHighlighter Container Size
This blog posting demonstrates a method to set the SyntaxHighlighter container size using JavaScript which can be useful for showing long blocks of code that you want the user to scroll through to see.
The container size can be set using CSS but it's not always practical to change for one-off adjustments. The example below adds an event loops that waits for SyntaxHighlighter to generate the formatted code. When the formatted code is generated its container height is set and the event loop is removed.
- Wrap the normal SyntaxHighlighter PRE tag containing your code inside a DIV container tag with an ID attribute. In this example our DIV ID is SHContainer1.
<div id="SHContainer1"> <pre class="brush: xml"> <CATALOG> <PLANT> <COMMON>Bloodroot</COMMON> <BOTANICAL>Sanguinaria canadensis</BOTANICAL> <ZONE>4</ZONE> ... <LIGHT>Mostly Sunny</LIGHT> <PRICE>$6.81</PRICE> <AVAILABILITY>051799</AVAILABILITY> </PLANT> </CATALOG </pre> </div>
- Replace the normal loader code
<script type="text/javascript"> SyntaxHighlighter.all(); </script>
with<script type="text/javascript"> SyntaxHighlighter.all(); var checkExist = setInterval(function() { if (typeof jQuery('#SHContainer1')[0].getElementsByClassName('syntaxhighlighter')[0] == 'object') { jQuery('#SHContainer1')[0].getElementsByClassName('syntaxhighlighter')[0].style.height='300px'; //console.log("Height was set."); clearInterval(checkExist); } }, 100); </script>
The script spawns the SyntaxHighlighter script and waits for the SHContainer1 with a syntaxhighlighter class to exist. Once it exists the height is set to 300px. Change SHContainer1 and 300px to match your desired container ID and height.
- The result will be a SyntaxHighlighter container that is limited in height as specified in the JavaScript setInterval time in the previous step. Here is an example:
<CATALOG> <PLANT> <COMMON>Bloodroot</COMMON> <BOTANICAL>Sanguinaria canadensis</BOTANICAL> <ZONE>4</ZONE> <LIGHT>Mostly Shady</LIGHT> <PRICE>$2.44</PRICE> <AVAILABILITY>031599</AVAILABILITY> </PLANT> <PLANT> <COMMON>Columbine</COMMON> <BOTANICAL>Aquilegia canadensis</BOTANICAL> <ZONE>3</ZONE> <LIGHT>Mostly Shady</LIGHT> <PRICE>$9.37</PRICE> <AVAILABILITY>030699</AVAILABILITY> </PLANT> <PLANT> <COMMON>Marsh Marigold</COMMON> <BOTANICAL>Caltha palustris</BOTANICAL> <ZONE>4</ZONE> <LIGHT>Mostly Sunny</LIGHT> <PRICE>$6.81</PRICE> <AVAILABILITY>051799</AVAILABILITY> </PLANT> </CATALOG>
.
Leave a comment