Skip to main content

How to change the CSS for the <code> tag

May 6, 2010 by Steve

As installed, the <code> tag definition in the Newswire theme has extra space between each line of output. I needed to tighten that up so that code snippets will be a little more readable. I'm using Firefox with Firebug installed, so I can right-click on the code and choose "Inspect Element" from the menu. Firebug shows me all the CSS that builds the display for that part of the page.

I learned that the <code> tag was defined in sites/all/themes/newswire/html-elements.css, on line 61, which looks like this:

pre,code { margin: 1.5em 0; white-space: pre; }

I'm no CSS guru, but with a little help from the internet, I was able to figure out that the culprit was the 'white-space' property.

The definition of 'pre' as a value for 'white-space' sounds like it should work ("Acts like <pre> tag in HTML..."). Turns out Drupal is putting in <br> tags on every line as part of the text formatting for the node. I don't know yet if this is in Drupal or in some other part of the theme. According to, the 'nowrap' setting means "text will never wrap to the next line. The text continues on the same line until a tag is encountered." To make the extra whitespace go away, I changed it to this:

pre,code { margin: 1.5em 0; white-space: nowrap; }

This works, but it does remove all the whitespace from the beginning of each line, meaning that all the indenting is lost. Needs more work.

Still to do: make a box around the code, inset it a little bit, maybe give it a slightly darker background color to set it off. I also like the effect I've seen on some sites where if the code is too wide for the layout, the code area scrolls. Have to figure that out one of these days. And it would be really nice to have color formatted code the way does.


  • @mtonak Oh, thanks, a game programming environment on the iPad is just what I need to increase productivity. 5 years 25 weeks ago
  • @prcutler Brilliant tumblr! 5 years 25 weeks ago
  • Aaaa! Just spilled turmeric on my fave Indian cookbook. 5 years 25 weeks ago

Premium Drupal Themes by Adaptivethemes