The WP-Syntax WordPress plugin enables GeSHi source code highlighting using HTML’s <pre> tag. Unfortunately wider code blocks will cause horizontal scrollbars if the layout isn’t 900px+ wide.

There is source code in the plugin to auto-expand when hovered over but it’s commented out. You must edit three files:

  • wp-syntax.php
    In method enqueueScripts(), uncomment the line invoking wp_enqueue_script() so wp-syntax.js will be loaded.
  • css/wp-syntax.css
    Ensure overflow, overflow-x, and overflow-y properties of class .wp_syntax are set to hidden.
  • js/wp-syntax.js
    For this now restored JavaScript, I suggest removing the heavy drop box-shadow CSS property added during the mouseover event because that design approach is now considered archaic.

The mouseover/mouseout events for expand/collapse of the code block will be immediate with no animated delay. If you wish to fancy it up like Four Kitchens’ blog, look into adding the CSS3 transition property to class .wp_syntax.