Revamping Code Blocks

Code blocks in a developer's blog are one of the main components I look at when reading.

I have spent a number of time fussing over the typography of my site but not so much on code blocks. I did strip away much of the syntax highlighting and replace it with a minimal set of colors but nothing else apart from that.

Now it's time for a change.

Rather than a white background with a border around it which is the only separator between the pre and the wider background, I want to take a layered, softer approach.

The current code block looks a bit like this:

fn main(){
 println!("Hello World");
}

For the new version, I want a lighter border and a gradient. The gradient will go to top, and transition from #f8f8f8 to #fcfcfc

This final result:

fn main(){
 println!("Hello World");
}

The change is subtle but nicer on the eye.