Well I thought I would spend a few mins on the blog today preparing for being able to post code not just being an infidel, it had been a while and what better excuse but to throw in a syntax highlighter. So in the interests of not having to do much before going home, in went Wp-Syntax. I found a great resource at X-Cell Source Blog that gave me a heads up on how the underlying GeSHi php library works too.

GeSHI is a syntax highlighting library for PHP

And the colours? Perfect for me thanks X-Cell, a good start Of course I threw in some rounded corners to take the sharp edges off, at least for the moment until I get sick of the current design and start again.

Well as a simple test I have to do a post to see if it works. Since I was also checking out a hosted plugin of sorts called LinkWithin for WordPress, I thought I would hit a number of things with the scatter shot of my coding shotgun, hoping I hit something.

One of the awkward things about LinkWithin is it’s not really setup to style and embeds all it’s own inline. When you sign up you have the choice of a dark or light skin, and the dark skin version that I chose wasn’t quite laid out how I would like. Just small things such as it has lines to delineate between the 3 boxes, the on hover colour was ugly (in my opinion, I am red-green blue-green colourblind to an extent, and you may be able to tell that from the colour choices I setup in GeSHi)

In the interest of convenience (and the almighty test) I am reposting the full wp-syntax here, which the small additions for the rounded corners for those with good browsers, lol.

.wp_syntax {
  background-color: #222;
}
 
.wp_syntax {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
  width: 630px;
  margin: 20px auto;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
}
 
.wp_syntax table {
  border-collapse: collapse;
}
 
.wp_syntax div, .wp_syntax td {
  vertical-align: top;
  padding: 2px 4px;
  -webkit-border-radius: 0.5em 0 0 0.5em;
  -moz-border-radius: 0.5em 0 0 0.5em;
}
 
.wp_syntax .line_numbers {
  text-align: right;
  background-color: #444444 !important;
  color: gray;
  overflow: visible;
}
 
/* potential overrides for other styles */
.wp_syntax pre {
  padding: 10px;
  margin-bottom: 15px;
  line-height: 17px;
  font-size: 13px;
  color: #fff;
  font-family: "Bitstream Vera Sans Mono", monospace;
}
 
.wp_syntax .code {
  background-color: #222;
  border :0px;
}

The trick so that I could over-ride the inline styles generated by the LinkWithin product was to use the important! property. Simple, there. Not much point to the post, but anyway TESTING TESTING!

Check out the rather simple CSS for the LinkWithin selections below, you may want to rip it off, adapt it and use in your own skin saving you .. oh what, a minute or two? you can see the effect under the code box, below “You may also like”

.linkwithin_posts a {
        border:0px !important;
        text-decoration:none !important;
        }  
 
.linkwithin_posts a:hover {
        background: #4F4D4D !important;
        -moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
        border-color:#413F3F;
        }
.linkwithin_posts div {
        border:0px !important;
        padding-bottom: 5px !important;
        }

Next bash scripts and python to convert over to something that looks good on a darker background.