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 w3schools.com, 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 Drupal.org does.

@stevew99999

  • Binoculars. White piece of paper. Transit of Venus! 5 years 19 weeks ago
  • Just heard @the_nerdery is a Best Place to Work on MPR. We're hiring, check us out! 5 years 20 weeks ago
  • Ah, summer in the Midwest, with the gentle sound of hail pelting the window air conditioner. 5 years 21 weeks ago

Premium Drupal Themes by Adaptivethemes