WP-Mix

I enjoy writing about HTML pre tags. In this post, I share some basic CSS to help style your pre tags for both screen and print media.

The HTML

It’s fine to use <pre> tags on their own, but if you include <code> tags like so (note that the following example replaces angle brackets with square brackets to cope with the syntax highlighter):

[pre][code]
	
	... include pre content here ...
	
[/pre][/code]

..that gives you a bit more flexibility in terms of styling with CSS. Let’s take a look at some examples.

CSS for screen display

One thing that’s great style-wise about <pre> tags is that they preserve the white space (spaces and line breaks) for any content that is included, so it’s perfect for displaying code snippets. With that in mind, here are some basic styles to make <pre> tags look great when displayed via web page:

pre {
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url(lines.png) repeat 0 0;
}
pre code {
	padding: 10px;
	color: #333;
}

This CSS styles all pre tags such that:

• The pre content is 100% width
• A horizontal scrollbar is displayed if the content exceeds the pre width
• A vertical scrollbar is not displayed (the pre box will be auto-sized to fit the entire height of its enclosed content)
• The background color will display as a light grey
• The pre box will display a thin border
• The code will include repeating/alternating stripes (see note)
• There will be 10px of padding around the pre content

Note: as-written, this code uses the background property to display a repeating image. The background image should be a few pixels wide and 40px in height (equal to 2x the line-height). The top 20px should be a darker/solid color, and the bottom 20px should be a light/transparent color. This will produce an alternating/lined background effect that can improve the readability of your pre content. Feel free to remove the background property if you would rather just use a solid/single-color background.

Also note that here we are applying padding and color via the <code> tag. To make things simpler, we could add box-sizing: border-box; to the <pre> selector, and then combine everything like so:

pre {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url(lines.png) repeat 0 0;
	padding: 10px;
	color: #333;
}

Of course, these are basic styles to get you going in the right direction. You should tweak the CSS according to your own preferences and to match the design of your web pages.

CSS for print display

So at this point your <pre> tags are styled for screen display (web pages), but how to make them look good on the printed page? Here is some CSS that you can include that will make your <pre> content look clean and readable when someone prints out one of your web pages.

@media print {
	pre {
		overflow-x: auto;
		white-space: pre-wrap;
		white-space: -moz-pre-wrap !important;
		white-space: -pre-wrap;
		white-space: -o-pre-wrap;
		word-wrap: break-word;
		background: #fff;
	}
}

Here we are using an @media query to apply styles only to printed media. So when someone prints your page, the pre content will be auto-wrapped to fit on the paper, and it will be displayed with dark text on a white background for maximum readability.

Remember these are just basic styles, I encourage you to experiment and fine-tune the CSS to suit your needs. Get creative and have fun!

Related

• Perfect Pre Tags
• Perfect Pre Tags (Redux)
• Wrapping Long URLs and Text Content with CSS
• CSS Dark Pre Tag Styles
• Filter pre tags in bbPress
• CSS Style Pre Tags