Code Formatting for WordPress aka Hacking the Pre tag

When I set out to build my WordPress blog I knew that I would need a way to neatly display code. So I made my way to the plugins directory over at www.wordpress.org. After looking at a few plugins, I settled on Ryan McGeary’s WP-Syntax.

WP-Syntax provides clean syntax highlighting using GeSHi — supporting a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.

I was pleasantly surprised with how well this plugin worked and with how good it made my code snippets look. Granted, this was until I tried to view the output in Internet Explorer. Big shocker there huh?

What was happening was the Pre tag wasn’t scrolling like I had configured it to. It would completely wreck my template’s formatting in that the Pre tags I was using would simply grow far too wide and end up displacing pieces of my template. Man this fired me up!

So I looked about on the internet for other possible solutions to the problem I was having. I didn’t really come up with much. A few people had some proprietary CSS settings that sort of worked but I really don’t like doing things this way. I’ll go ahead and quote this method in case you’d like to try it:

1
2
3
4
5
6
7
8

pre {
	white-space: pre-wrap; 
	white-space: -moz-pre-wrap !important; 
	white-space: -pre-wrap; 
	white-space: -o-pre-wrap; 
	word-wrap: break-word;   
	width: 99%;
}

I found this in several different places so I can’t honestly say who it was that is ultimately responsible for this hack. Kudos to this man or woman I say! Apparently, this has helped a few people along the way.

Moving on… So all of a sudden I remembered that there is BBCODE - [CODE][/CODE] - that exists to handle this. So I figured why not take a look under the hood and see how it was they accomplished this. What I came up with was the following:

1
2
3
4
5
6

pre {
	margin: 0px;
	padding: 0px;
	width: 465px;
	overflow: auto;
}

Basically, all that really took place was setting the overflow and the width attribute. Duh right? The problem was that I was trying to integrate this into the suggested configuration that WP-Syntax came with. I didn’t have much luck at first. Ryan’s suggested settings are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

.wp_syntax { 
      color: #100;
      background-color: #f9f9f9;
      border: 1px solid silver;
      margin: 0 0 1.5em 0;
      overflow: auto;
    }
 
    /* IE FIX */
    .wp_syntax { 
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
    }
 
    .wp_syntax table {
      border-collapse: collapse;
    }
 
    .wp_syntax div, .wp_syntax td { 
      vertical-align: top;
      padding: 2px 4px;
    }
 
    .wp_syntax .line_numbers {
      text-align: right;
      background-color: #def;
      color: gray;
      overflow: visible;
    }
 
    /* potential overrides for other styles */
    .wp_syntax pre {
      margin: 0;
      width: auto;
      float: none;
      clear: none;
      overflow: visible;
    }

So after a while of tweaking and poking I came up with a happy middle ground that is ultimately what you are currently viewing on my blog. My configuration is as such:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.wp_syntax {
	padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
	color: #100;
	margin: 0px;
	margin-bottom: 10px;
	padding: 0px;
}
 
.wp_syntax table {
	border-collapse: collapse;
}
 
.wp_syntax div, .wp_syntax td {
	vertical-align: top;
}
 
.wp_syntax .line_numbers {
	text-align: right;
	background-color: #def;
	color: gray;
}
 
pre {
	margin: 0px;
	padding: 0px;
	width: 465px;
	overflow: auto;
}
 
.code pre {
	background-color: #f9f9f9;
	border: 1px solid silver;
	padding: 0px;
	padding-left: 2px;
	padding-right: 2px;
	margin: 0px;
}
 
.line_numbers pre {
	padding: 0px;
	padding-left: 2px;
	padding-right: 2px;
	margin: 0px;
	width: auto;
}

This allows me to freely use the Pre tag on its own or through the use of the installed WP-Syntax Plugin. You may want to look at how Ryan’s Plugin outputs the resulting HTML to understand what’s going on here.

Is good? You like? I hope so… Let me know your thoughts on this if you have any.

Technorati: CSS, XHTML, Pre Tag, Pre, Tag, Code Formatting, Code Format, Code Display, Format, Display, WordPress, WP-Syntax, Template, Ryan McGreary