Fancy Styling of your Code Box

css

In case you have a programming or design blog with code blocks on it, you belong to the group of blogs I often visit. Though most of them have valuable code pieces, what I hate most is ordinary or badly styled code blocks. Here is a guide which should help you to make the user experience more pleasant.

Code Color Combinations

For all the non-designers here, I guess the most difficult part is to imagine colors for the the different highlighted language parts of the code (e.g. comment, keywords, numbers, strings, brackets, …) that fit together. Maybe you are a TextMate fan like me and like one of the existing themes. Once you have one that you actually think is good for your taste, all you have to do is to copy its color hex codes.

Even if you don’t have TextMate, you can download the themes (xml files) from the link above and open them in any text editor. You will then see the different colors as hex codes and the corresponding language part in the string tag (see second picture below). Alternatively you could copy the color hexes from this Geshi CSS pack by Mark Spouk.

Use the WP-Syntax Plugin

I evaluated different solutions to include code highlighting in my wordpress blog. I then sticked to WP-Syntax as it fits best my needs. I already had knowledge of the GeSHi php library, which supports a wide range of popular languages and creates clean syntax highlighting. I like the “line” feature of WP-Syntax which makes it possible to switch on/off line numbering. I also considered SyntaxHighlighter, but don’t liked it, as it looks the same on every website.

Step 1: Install WP-Syntax like every other wordpress plugin.
Step 2: Copy wp-syntax.css to your active theme directory.

Styling of Code Box

We will begin by styling the code box. Open the copied version of wp-syntax.css in your theme directory. My favorite background color for codes is black, so I changed the background-color of .wp_syntax accordingly. The second thing you might do is to change the font type in .wpsyntax pre to whatever you like. I suggest you use a monospace font type, as every char has the same with (that’s what monospace stands for), what is a good property for coding. I further fixed the width to 630 pixel. To style the line numbers, edit .wpsyntax .linenumbers accordingly. If you have already worked with css, it shouldn’t be too hard to get it the way you like. Here is the css code for the coding blocks on this blog.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.wp_syntax {
  background-color: #222;
}
 
/* IE FIX */
.wp_syntax {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
  width: 630px;
  margin: 20px auto;
}
 
.wp_syntax table {
  border-collapse: collapse;
}
 
.wp_syntax div, .wp_syntax td {
  vertical-align: top;
  padding: 2px 4px;
}
 
.wp_syntax .line_numbers {
  text-align: right;
  background-color: #444444 !important;
  color: gray;
  overflow: visible;
}
 
/* potential overrides for other styles */
.wp_syntax pre {
  padding: 10px;
  margin-bottom: 15px;
  line-height: 17px;
  font-size: 13px;
  color: #fff;
  font-family: "Bitstream Vera Sans Mono", monospace;
}

Styling of Highlighting

After you have styled the coding block itself, it’s time to change the style of the highlighting. The most easiest way to do this is by altering the GeSHi code. Therefore go to the folder /wp-content/plugins/wp-syntax/geshi/. For every language you will find a .php file which will alter your code to represent the code highlighting. As I am mostly concerned with php, sql and css, I have altered the three files php.php, sql.php and css.php. Open the the file for the language you will use and search for the STYLES array in the $language_data array. You than have to alter the color item with the hex code from above for some or all of following language parts.

1. keywords
2. comments
3. escape_char
4. brackets
5. strings
6. numbers
7. methods
8. symbols
9. regexps
10. script

This is the altered STYLES array in the $language_data array of my php.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

$language_data = array(
  // ...
  'STYLES' => array(
    'KEYWORDS' => array(
        1 => 'color: #FF8400;',
        2 => 'color: #FFCC66;',
        3 => 'color: #07DFFC;',
        4 => 'color: #FFCC66;'
        ),
    'COMMENTS' => array(
        1 => 'color: #BD48B3; font-style: italic;',
        2 => 'color: #BD48B3; font-style: italic;',
        3 => 'color: #BD48B3; font-style: italic;',
        4 => 'color: #BD48B3; font-style: italic;',
        'MULTI' => 'color: #BD48B3; font-style: italic;'
        ),
    'ESCAPE_CHAR' => array(
        0 => 'color: #ddd;',
        1 => 'color: #fff;',
        2 => 'color: #660099;',
        3 => 'color: #660099;',
        4 => 'color: #006699;',
        5 => 'color: #006699; font-style: italic;',
        6 => 'color: #99FF00;',
        'HARD' => 'color: #000099;'
        ),
    'BRACKETS' => array(
        0 => 'color: #fff;'
        ),
    'STRINGS' => array(
        0 => 'color: #99FF00;',
        'HARD' => 'color: #99FF00;'
        ),
    'NUMBERS' => array(
        0 => 'color: #66CC66;',
        GESHI_NUMBER_OCT_PREFIX => 'color: #208080;',
        GESHI_NUMBER_HEX_PREFIX => 'color: #208080;',
        GESHI_NUMBER_FLT_SCI_ZERO => 'color:#800080;',
        ),
    'METHODS' => array(
        1 => 'color: #FFCC66;',
        2 => 'color: #FFCC66;'
        ),
    'SYMBOLS' => array(
        0 => 'color: #fff;',
        1 => 'color: #FFCC66;'
        ),
    'REGEXPS' => array(
        0 => 'color: #fff;'
        ),
    'SCRIPT' => array(
        0 => '',
        1 => '',
        2 => '',
        3 => '',
        4 => '',
        5 => ''
        )
    ),
    //...
);

If you don’t know, which language part you have to alter, you can look above the STYLES array. There you will find all the “language words” in the corresponding language part. For example above I have defined that all keywords in section 1 will be colored #FF8400. I scroll up in the file and find that the following words will colored with that color, namely:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$language_data = array (
  //...
  'KEYWORDS' => array(
      1 => array(
          'as','break','case','continue','default','do','else','elseif',
          'endfor','endforeach','endif','endswitch','endwhile','for',
          'foreach','if','include','include_once','require','require_once',
          'return','switch','while','echo','print'
          ),
  //...
  ),
  //...
  // STYLES
  //...
);

Test your New Code Box

Create a new post and switch to the html view. Add the following code to present a code box with php code in it

1
2
3
4

<pre lang="php" line="1">
  echo "Hello world";
  //...
</pre>

To use another language change the lang attribute accordingly (for the language abbreviation, use the name of the .php file you have altered in the last section). Reload your post and that should be it. If you have any questions or suggestions feel free to comment on this article.

Download My Styling

Here is a zip archive with my php.php, css.php and sql.php styles. Fancy Codebox Styling (21)

Follow Us

• 
• 
• 

Donate