Wild Fun with CSS and WordPress Themes
Today I had a few minutes, and I wanted to spend a little time messing with the CSS on my work WordPress blog because the CodeHighlighter plugin I'm using is great if the background is white, as this guy is, but it's not so great when the background is black - like the YellowJacket theme for WordPress.
The problem is that I wanted a simple <pre> tag to have the same foreground/background color scheme as the regular text - not the code-ified version that the CodeHightlighter uses. So I had to be a little tricky with the CSS... but in the end, I got it.
The trick for me was to realize that the CodeHighlighter really just set the class of the <pre> tag to the language (give or take). So, if I added those specific tags to the CSS for the theme, I could make the code <pre> tags different from the other <pre> tags and that was the ticket. Trying to make the 'standard' <pre> tag different was a waste - and never got me what I wanted.
So, the CSS looks like this:
pre.java, .sql, .c, .cpp, .css, .bash, .python { font-family: 'Luxi Mono', 'Courier New', Courier; font-size: 90%; line-height: 100%; background: #fff; color: #000; border: 1px dotted #ccc; padding: 0.2em 0.5em; } pre { font-family: 'Luxi Mono', 'Courier New', Courier; font-size: 90%; line-height: 100%; }
With this, I can get the code segments with a white background so they look nice with the CodeHighlighter, and at the same time, I get my simple <pre> tags looking like they fit in with the rest of the text. Nice.
UPDATE: I decided that I liked it so much, I saved off my copy of the theme to my WordPress home on HostMonster. Now I don't have to worry about losing it. Sweet.
UPDATE: Another thing to note: Don't put the <pre> tag on a line by itself if you're using a 'language' option. It'll put in an extra line at the top and bottom and thus space out your code more. Keep it tight.