Using jQuery to make an Expandable Code Box for WP-Syntax
You 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:
113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 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.
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 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:
1 2 3 4 5 6 7 | .wp_syntax { color: #100; background-color: #f9f9f9; border: 1px solid silver; margin: 0 0 1.5em 0; overflow: auto; } |
to:
1 2 3 4 5 6 7 8 | .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
Nice work,
you’re only missing a at the end of the code. Add that and it’s golden (btw, it might be a nice patch to propose to Ryan as an plugin option)
oops, should have realized it wouldn’t render…
What I meant to say is you are missing a
at the end of the header code.
Arggg… (feel free to delete these later)
What I mean is that in your code you open the script tag but forget to close it.
I figured that was what you were talking about. To use the <pre lang=”php”> tag, just place it around the code you want to write, but don’t change any of the code characters into Hex Code chars.
Hey there great job on the jQuery extension to wp-syntax I like it!!! I am having one problem though it goes behind my sidebar and does not shoe up like your twitter example.
Any help would be appreciated.
I can give you a link if you want to see what I am talking about.
Thanks in advance.
Tom
You are probably having an issue with the z-index of your sidebar. Try adding this to your wp-syntax CSS:
I tried that and nothing helps I tried other themes and a few work but the theme that I want to use does not…bummer any thoughts?
let me give you the link:
http://www.thomasnorberg.com/2009/01/c-code-shift-cipher/
Yeah. I tried doing a few tests on your site but I couldn’t get it to work. Not too sure what the issue might be.
Bummer I will deactivate for now until I talk with the theme guro but I really like this feature man really cool too bad it does not work for my theme. Confusing.
Tom