Web Cash

Once you’ve figured out how to display your sample HTML without the browser rendering it, you need to style it so that your user can easily read the code and distinguish it from surrounding text.

Note: These techniques are perfect for styling any type of code (php, c++, etc) – not just HTML.

There are a few things you’ll want to do to style your code:

• Use a typical mono-space font, for spacing and readability
• Preserve spacing, so that you can indent sections
• Change the background color, so the block sticks out
• Optional: Add syntax highlighting for certain phrases

Mono-Space Fonts with <code>

The first tag you’ll come to use in formatting your code is the aptly named <code> tag.

This does two things for you.

One, it switches the font to a mono-space font. Example: <p>This is an HTML sentence in code tags.</p>

This helps distinguish little snippets of codes (like quoting function names, variables, and HTML tags). It also helps spacing multiple line code snippets.

Second, the <code> tag serves a logical purpose. It literally denotes the text as computer code, similar to the way that <strong> and <em> tags both style and describe the text.

So, semantically, it’s proper to use a <code> tag to denote code examples.

Preserve Spacing with <pre>

The next tag that you’ll want to use is the <pre> tag.

The major purpose of this tag is to preserve the spacing of the source code. Normally, HTML ignores extra white space between paragraphs and words – the <pre> tag forces the browser to display that white space.

With this, you can indent code and make it much more readable. If you didn’t wrap all of your text in a <code> tag, then <pre> would also convert the text to monospace.

Change the Background Color

The <pre> tag also creates a block level element for your code example – allowing you to style it to help it stick out from the rest of the text.

Typically, you’ll want to change the background color. You may also want to add some margins and padding.

By choosing a background color that contrasts your typically background color, you can help the example code pop out of the page.

Example:

<div>
  <p>Here’s an example</p>
  <p>This text is wrapped in both a
     code and pre tag.</p>
  <p>Notice the indentation of these
     paragraph tags.</p>
</div>

Optional: Add Syntax Highlighting

If you want to add some special touches – which would be nice for longer code examples – you can add syntax highlighting. You know, the thing your code-editor does – variables are one color, strings are another, built-in functions another…

To do this, you’ll need to add a set of <span> tags. A <span> tag allows you to create a custom style for a small bit of text – like a word or phrase.

The basic way to do this would be to create a <span> with an inline style in your text. Like…

This is some sample <span
  style="color: red">"code"</span>.

This would create:

This is some sample “code”.

If you want to go all out and completely syntax highlight your code, just create a handful of <span> classes in your stylesheet and apply where appropriate.

So What Goes Into Your Stylesheet

So, bottom line… what do you put into the stylesheet?

I’ll include two things here. The basic template: the properties you’ll want to set. My template: the styles defined for this page.

Then, wrap all of you code in <code> and <pre> and you’re good to go.

pre, code {
  font:
}

pre {
  background-color:
  color:
  padding:
}

span.syntax_type {
  color:
}

code, pre {
  font: 1.1em "Andale Mono", "Lucida Console",
    "Bitstream Vera Sans Mono", "Courier New", monospace;
}

pre {
  margin-bottom: 1em;
  background-color: #e5e5e5;
  padding: 0.5em;
  overflow: hidden;
}

That’s all there is to it. Good luck styling your code.

Go back to the main guide: How to Display Sample HTML