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.

  1. 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>
    
  2. 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.
     
  3. 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>
    

    .

Share this post

Leave a comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

About Us

Congruity Service is a technology solutions company bringing the best technology solutions to OpenInsight projects, Drupal sites, servers, networks, and your technology needs.