Using jQuery to make an Expandable Code Box for WP-Syntax

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 .= "
"; $output .= wp_syntax_line_numbers($code, $line); $output .= ""; $output .= $geshi->parse_code(); $output .= "
"; } else { $output .= "
"; $output .= $geshi->parse_code(); $output .= "
"; }

We need to add a table to the second output.

    if ($line)
    {
        $output .= "
"; $output .= wp_syntax_line_numbers($code, $line); $output .= ""; $output .= $geshi->parse_code(); $output .= "
"; } else { $output .= "
"; $output .= "
"; $output .= $geshi->parse_code(); $output .= "
"; $output .= "
"; }

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.:



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

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie