Codesample CSS style

When I have source code or want to demonstrate typing at the console, I’d like to show that highlighted in a certain way. I know precious little CSS, but here’s the pinnacle of my current achievement: the code sample box:

int x = 5;
++x;

To accomplish this, I first define the codesample style*:

<style>
.codesample {border:thin solid gray; padding-left:3em; font-family:Courier,monospace;
             background-color:#eeeeee; color:black;}
</style>

When I want to make use of this style, I just use a <pre> tag with a class of codesample:

<pre class="codesample">
int x = 5;
++x;
</pre>

…which yields the look featured at the top.

Next step: Right now I redefine the codesample style in each internal blog post.  As an alternative, there are a couple of ways to specify an external style sheet…maybe I’ll eventually set that up in SharePoint and have each post that needs it just point to that.

*(Here on WordPress I’ve purchased the custom CSS upgrade and I just put the .codesample part in the custom CSS area of the blog site admin; but for a SharePoint blog post I would do as above, putting the <style> tag in the body of the post**.)

**The <style> element is supposed to be in the <head> of an HTML document, not the <body>… possibly you can get at the <head> and do this more properly – I just don’t know how a the moment.

Advertisements

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

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