jqueryYou may have noticed that I’m using a new syntax highlighter for my code snippets. I installed Ryan McGeary‘s WordPress plugin WP-Syntax which uses GeSHi (Generic Syntax Highlighter), a simple highlighting class that supports multiple coding languages. It’s great but I’m not a fan of the horizontal scrollbar that appears if code extends past your site’s width. Instead, I decided to use jQuery to expand the box when you hover over it.

We need to make a few minor changes to the plugin code to get this to work. After you have downloaded, installed and activated the plugin, open up wp-syntax.php and go to line #113:

    if ($line)
    {
        $output .= "<table><tr><td class=\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= "</td><td class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</td></tr></table>";
    }
    else
    {
        $output .= "<div class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</div>";
    }

We need to add a table to the second output.

    if ($line)
    {
        $output .= "<table><tr><td class=\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= "</td><td class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</td></tr></table>";
    }
    else
    {
        $output .= "<table><tr><td>";
        $output .= "<div class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</div>";
        $output .= "</td></tr></table>";
    }

Next we need to open up wp-syntax.css to change a few of the styles. Change this:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

to:

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: hidden;
  width: 590px;
}

I put a fixed width of 590px because I have set that as the maximum width of my single posts.

Now comes the jQuery. Open up your theme’s header.php file and add the following between your <head> tags.:

<?php wp_enqueue_script("jquery"); ?>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".wp_syntax").hover(function() {
	var width = jQuery("table", this).width();
	var pad = width + 5;
	if (width > 590) {
		jQuery(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: pad + "px"
			});
		}
	}, function() {
			jQuery(this).stop(true, false).animate({
				width: 590
		});
	});
});
</script>

What we are doing above is creating an effect that will only occur when you hover over the code box. It finds the width of the table and animates the expansion to the full width. When you hover out, the box returns to the fixed width of your post. Be sure that you set the two references to 590 to whatever you set your width to in the CSS.

Done and done!

To see this in action check out How to Create a Twitter Feed on Your Web Site.

Resource: Making an Expanding Code Box by Chris Coyier