Blog Style Reference

This post is simply for my own reference to keep in a convienient place (what's more convienient than actually on the blog itself).

This is just a list of the formatting and HTML tagging I regularly use to make sure the blog stays consistent. Feel free to copy.

Details after the break...

Useful sources footer

Title: "Useful sources"
- hyperlinks here
- title not underlined
- grey colour - row: top, column: 4th from left
- italic
- two line spaces above and one below

Code blocks
[Note that I find the xml brush to be the best for general purpose code.]

 <pre class="brush:xml">
Normal code
</pre>

<pre class="brush:xml; gutter: false">
No line numbers
</pre>

<pre class="brush:xml; gutter: false, highlight: [2, 4]">
Line numbers and
  highlighting on lines 2 and 4
</pre>

Code (and linux filenames, etc) inline
For inline code highlighting we'll simply change the font to Courier and the colour to orange (row: 2nd from top, column: 2nd from left)


Footnotes
In HTML mode add this to the body of your post where you want the superscript number:
<a href="#1" name="top1">¹</a>

And at the bottom of your post where you want the footnote text add this:

<a name="1"><b>1 </b></a>
  This is the footnote text
  You can write what ever you want
<a href="#top1"><sup>?</sup></a>

Note that once you add the footnote, if you go back to the normal Compose screen it can screw up the presentation of it and you may need to redo it in the Html view.

Hover-over popup
This can be a good alternative to the footnote as it doesn't get screwed up by going back to the Compose screen. But it isn't good for text which could need copied e.g. code samples. Here it is in action [test]. And here is the code used:

<span title="Here is some popup text"><span style="color: red; font-size: smaller; font-weight: bold; vertical-align: super;">[test]</span></span>