Hilighting code blocks in Worpdress blog posts can be achieved with different plugins and one of them is the WP-Syntax plugin which uses GeSHi source code highlighting and supports a wide range of popular languages, highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser. The plugin highlights code using HTML’s <pre> tag, e.g. <pre lang=”java” line=”1″> for Java and line numbers starting at 1.
Source code highlighting makes it easier to read examples but sometimes if your layout isn’t 900+ pixels wide, you may end up with horizontal scrollbars for wider code blocks as you can’t always make it 80 characters. But fortunately you can make the plugin auto-expand the code block when hovered over. You just have to edit the plugins code a bit as Derek MacDonald explains.
For some reason the code to auto-expand the block when hovered over has been commented out in the plugin and to enable it you’ll have to edit three files:
wp-syntax/wp-syntax.php
In method enqueueScripts(), uncomment the line that invokes wp_enqueue_script() so wp-syntax.js will be loaded.
wp-syntax/css/wp-syntax.css
Ensure the overflow, overflow-x, and overflow-y properties of class .wp_syntax are set to hidden.
wp-syntax/js/wp-syntax.js
It might be better to remove the box-shadow CSS property added during the mouseover event because it doesn’t look good in most designs.
The mouseover/mouseout expand/collapse events will be immediate with no delay.
Leave a Reply