CSS Zibaldone

• Home
  • CSS Articles
    • Styling code blocks

Styling code blocks

In this article I'll explain how to use CSS for styling code blocks. Code blocks are generally formatted by using the pre element. Roger Johansson has proposed another way to accomplish this task and I'll follow his example with further improvements.

Table of contents

• The markup
• General styles
• Creating indentations
• Adding a vertical scrollbar
• Download examples

The markup

The proposed markup for code blocks is the following:

Listing 1. Proposed markup for code blocks

1. <ol class="code">
2. <li><code>/* static */</code></li>
3. ...omission...
4. <li class="indent1"><code>gLexTableSetup = PR_TRUE;</code></li>
5. ...omission...
6. <li class="indent2"><code>lt[i] |= IS_IDENT | START_IDENT;</code></li>
7. ...omission...
8. <li class="indent3"><code>lt[i] |= IS_HEX_DIGIT;</code></li>
9. ...omission...
10. <li id="last">...</li>
11. </ol>

View the example

Since we're dealing with computer code, the most semantic way to mark it up is by using the code element. Furthermore, by using an unordered list instead of a pre element we can be sure that the content of the block will not overflow its container when we change the size of the window or the dimensions of the container itself.

General styles

The general style are really simple.

Listing 2. General styles

1. ol.code {
2. background: #e7e7f5;
3. color: #333;
4. margin: 0;
5. padding: 0.5em;
6. width: 55%;
7. list-style: none;
8. }
9. ol.code li {
10. border-bottom: 1px solid #666;
11. }
12. ol.code li#last {
13. border-bottom: none;
14. }
15. ol.code code {
16. font: small "Courier New", Courier, monospace;
17. }

View the example

We've set a width, some padding, resetted the default margins and got rid of the list marker on the ol element. All list items will have a bottom border, except the item with the ID #last. Finally, we've set the font size and family on the code element.

Creating indentations

Also this step is actually simple.

Listing 3. Creating indentations

1. ol.code .indent1 {
2. padding-left: 1em;
3. }
4. ol.code .indent2 {
5. padding-left: 2em;
6. }
7. ol.code .indent3 {
8. padding-left: 3em;
9. }

View the example

We've created progressive, meaningful classes to be applied to the elements in the list. Each classes have a progressive left padding that actually creates the required indentations.

Adding a vertical scrollbar

Adding a vertical scrollbar to the code block requires only two simple declarations.

Listing 4. Adding a vertical scrollbar

1. ol.code {
2. height: 100px;
3. overflow: auto;
4. }

View the example

The first declaration sets a height on the list. In order to make it work, the height must be always less than the global amount of the list's content. By doing so, browsers are forced to let the content overflow its container. The second declaration, in fact, deals with the overflowing content through the auto value of the overflow property. Since the specifications state that in case of overflowing content browsers must always provide a mechanism for viewing the content, browsers add a vertical scrollbar to our list.

Download examples

examples.zip