It’s great that you can preview your post in Blogger. However (unless I’ve missed something) there’s no way of changing the CSS style that the preview uses. Therefore, the post is likely to look very different by the time it appears on your blog (particularly for blogs that have black backgrounds, like this one).

Luckily, I’ve worked out how to get around this limitation. Firefox allows you to create custom style sheets and apply them on a site-by-site basis. The method for getting your Blogger preview to look more realistic is as follows.

Edit the file userContent.css (empty by default, unless you’ve already added your own overrides) to include the following:

@-moz-document url-prefix("http://www.blogger.com/post-") { }

This will apply any formatting rules inside the { } to the blogger site’s post-create and post-edit pages.

Add whatever formatting you wish to apply (it’s probably necessary to cut and paste from a sample page of your blog). Add whatever formatting you require, adding #previewbody at the start (this is the DIV containing the preview) and !important at the end (to force an override of any blogger-imposed styles).

A simple example might look something like this:

@-moz-document url-prefix("http://www.blogger.com/post-")
{
    #previewbody {
        background:#000 !important;
        font: Verdana,Sans-Serif !important;
    }

    #previewbody code {
        color: cornflowerblue !important;
    }
}

Save the file and close and restart Firefox for the change to take effect.