New code display plugin

kbdI took the opportunity to replace the code formatting plugin I was using. Previously I was using codesnippets, but was never 100% happy with it, for a couple of niggling reasons, but mainly due to the lack of horizontal scrollbars, which meant longer lines of code were truncated and messed up the layout when displayed.

I’d seen a couple of better looking ones in use on some of the tech sites I’ve come across, so, after pinging Pro Blog Design (thanks Michael) I’ve replaced my previous plugin with a new one – wp-syntax.

Much nicer looking, in my opinion, and easy to implement as I’ve come to expect of WP plugins (why should I be so impressed by something that should be the norm?), but unable to resist a couple of little tweaks to make it fit in just right. So, I made the following changes to the wp-syntax.css file the plugin puts automatically in your theme’s root directory.

First, to put a border round the code display since my pages have a light background and it doesn’t stand out enough, I added the following:

.wp_syntax {
...
	border:1px solid silver;
...
}

Then to indent it a little from the edge of the page and roughly center it, I changed:

.wp_syntax {
...
	width:100% !important;
	width:99%;
...
}

to…

.wp_syntax {
...
 width:95% !important;
	width:95%;
	margin-left: 10px;
...
}
 
Sweet!

Leave a Reply