A new look and feel

I’ve been making the best use I can of the default wordpress features for a while now, but I’m still not really happy with the degree of control over the resulting pages, particularly when it comes to any code listings or console output.

To see if I could I find a solution started to experiment a bit and discovered found that by replacing the ‘<code>’ and ‘<pre>’ tags with a ‘<div>’ tag you can specify the exact style you want which gives much more control over the layout and appearance of the page.

I originally used the wordpress ‘<code>’ and ‘<pre>’ tags to format things like source code as shown below.

<code><pre>#!/bin/bash
#
# loop.sh
#
x=1024
while [[ $x -gt 0 ]] ;do
   echo $x
   x=$(($x >> 1))
done
</code></pre>

This will result in the source code being shown on a grey background using a monospaced font. You could argue that there isn’t really anything wrong with this, but I wanted a bit more control over the layout of the text.

#!/bin/bash
#
# loop.sh
#
x=1024
while [[ $x -gt 0 ]] ;do
   echo $x
   x=$(($x >> 1))
done

Specifying each of the modified style properties individually does involve some extra work which does negate some of the advantages of using wordpress in the first place, but I was spending quite a lot of time editing each page, checking the layout and modifying it until I got the results I wanted anyway. This does make the formatting of each page a lot more complicated and quite verbose, but it isn't that hard to do.

You will also discover that to get some of the special (and not so special) characters to display properly you will have to replace them with their corresponding HTML or hexadecimal character codes as wordpress tries to 'intelligently' substitute things like pairs of quotes with opening and closing quotes and multiple hyphens with a long dash. This can be rather awkward when cutting and paste any text directly from the web page, and it isn't always easy to see what has been changed.

Using the following substitutions resolves these formatting issues:

  • Ampersands (&) must be replaced with '&amp;'.
  • Hash characters (#) may need to be replaced with '&#035;' when being used in HTML codes.
  • Multiple spaces need to be replaced with '&#nbsp;&#nbsp;' to preserve layout.
  • Less than (<) and greater than (>) symbols need to be replaced with '&#060;' and '&#062;'.
  • Any hyphens (-) need to be replaced with '&#045;' and multiple full stops (...) with '&#46;&#46;&#46;'.
  • Double quotes (") should be replaced with '&quot;' or '&#034;' and single quotes (') with '&#039;'.
  • Lastly you need to replace the colon (:) after http or https with '&#058;' if you don't want URLs to appear as links.

Note - Do not be tempted to use '&lt;' or '&gt;' in place of '&#060;' and '&#062;' when replacing (<) or (>) characters, or to use 'white-space:pre' instead of 'white-space:nowrap' - as even if text looks right even when pasted the code may not work as expected. You can have hours of fun tracking down problems like that! (I know, as it has happened to me more than once).

After making these changes the page source for the program listing above becomes:


<div style="border-color:#d2d0ce; border-style:solid; border-width:1px;
border-radius:5px; background:#f7f7f7; padding:10px; line-height:133%;
font-family:monospace; white-space:nowrap; overflow:auto; font-size:10pt;
color:#696969;">
#!/bin/bash
#
# loop.sh
#
x=1024
while [[ $x &#045;gt 0 ]] ;do
&nbsp;&nbsp; echo $x
&nbsp;&nbsp; x=$(($x &#062;&#062; 1))
done
</div><br><p>

This may look like a lot of work for a grey box with rounded corners, particularly as this isn't very different from the previous version, but now I can decide how thick the border should be, how much space there should be around the text, what font size to use, and so on.

#!/bin/bash
#
# loop.sh
#
x=1024
while [[ $x -gt 0 ]] ;do
   echo $x
   x=$(($x >> 1))
done

You can add a title to the box by nesting two '<div>' tags inside another, creating an outer section with a grey border and rounded corners, and two inner sections with no borders, one containing the title on a blue background and another with a grey background that contains the listing.

<div style="border-color:#d2d0ce; border-style:solid; border-width:1px;
border-radius:5px; padding:0; background:#a9a9a9;">
<div style="border-width:0px; padding-left:10px;
background:#9bc3eb; font-size:10pt; color:#ffffff;">
Source code</div>
<div style="border-width:0px; padding:10px; background:#f7f7f7;
line-height:133%; font-size:10pt; color:#696969; font-family:monospace;
white-space:nowrap; overflow:auto;">
#!/bin/bash
#
# loop.sh
#
x=1024
while [[ $x &#045;gt 0 ]] ;do
&nbsp;&nbsp; echo $x
&nbsp;&nbsp; x=$(($x &#062;&#062; 1))
done
</div></div><br><p>

Since the outer section has no padding the inner sections completely fill it, making it look like a text box with a title bar. I've kept the text in the title bar in the same font as the rest of the page, but made it the same size as the font in the text box.

Source code
#!/bin/bash
#
# loop.sh
#
x=1024
while [[ $x -gt 0 ]] ;do
   echo $x
   x=$(($x >> 1))
done

To highlight the keywords and values you can used the HTML 'span' tag to give individual elements a distinct colour, this is great for highlighting key words but it does make the original text quite difficult to read. (If you think the listing below is a bit convoluted, then you don't want think about the HTML need to produce it!).

<div style="border-color:#d2d0ce; border-style:solid; border-width:1px;
border-radius:5px; background:#f7f7f7; padding:10px; line-height:133%;
font-family:monospace; white-space:nowrap; overflow:auto; font-size:10pt;
color:#696969;">
#!/bin/bash
#
# loop.sh
#
x=<span style="color:#00CED1;">1024</span>
<span style="color:#1E90FF;">while</span> [[ $x &#045;gt <span style="color:#00CED1;">0</span> ]] ;<span style="color:#1E90FF;">do</span>
&nbsp;&nbsp; echo $x
&nbsp;&nbsp; x=$(($x &#062;&#062; <span style="color:#00CED1;">1</span>))
<span style="color:#1E90FF;">done</span>
</div><br><p>

Up until now any changes simply involved some editing of the text using search and replace and pasting in the boiler plate at the beginning and end. Highlighting individual words is a lot of extra effort, but I think it is worth it as using different colours for any reserved words and numeric constants improves the appearance of the code listing considerably.

#!/bin/bash
#
# loop.sh
#
x=1024
while [[ $x -gt 0 ]] ;do
   echo $x
   x=$(($x >> 1))
done

Using different colour combinations also allows the text to be formatted to match different types of output.

<div style="border-color:#d2d0ce;
border-style:solid; border-width:1px; border-radius:5px;
background:#000; padding:10px; line-height:133%; font-family:monospace;
font-size:10pt; color:#a9a9a9;">

Results in a black back background with white text suitable for showing what the output on a console would look like.

# chmod +x loop.sh
# ls loop.sh
loop.sh
#

$ ./sh-loop.sh
1024
512
256
128
64
32
16
8
4
2
1
$

Getting the formatting just right does involve quite a bit more work but I think the results are worth the extra effort. Figuring out how to make everything work the way I wanted it to has been strangely absorbing and a little frustrating but was quite fun and as a result I now know a lot more about HTML styles than I used to!

This entry was posted in Programming and tagged , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s