Style Your Code Samples Without Excessive Markup

May
18

One Comment - LEAVE A COMMENT

I’ve noticed a lot of sites have a very complicated way of styling the code samples they provide, using multiple span classes and/or inline styles and many, many <br />s. Other times the site just wraps the code in a <code> attribute and doesn’t highlight the different syntaxes.

I’ve written some simple CSS styles to fix this problem. So if you are interested in having your code display as if it was in a text editor with syntax highlighting here is an easy way to do it.

The first example is a sample of CSS code and how it can look when you apply these styles (***This is not the actual styles, just an EXAMPLE):

/*Center Content Depending on screen size/resolution*/
#container {
	position:relative;
	width:800px;
	margin:0 auto;
	}


/* LOGO, Searchbox, Product Links*/
#header {
	float:left;
	width:800px;
	clear:both;
	background:url(images/top-border.gif) bottom left no-repeat;
	padding-bottom:25px;
	}
	
#header h1#logo {
	float:left;
	width:195px;
	height:65px;
	}
	

By wrapping the code in a div I assigned the class “css” to and using strong and ems within I have a nice stylized version of my code.

Here is an example with xhtml:

<!-- END HEADER -->
</div>

<!-- START SITE NAVIGATION -->
<ul class="sitenav">

<li><a href="product.html" class="first">Registry</a></li> 
<li><a href="product.html">Innovative Community</a></li> 
<li><a href="product.html">About Innovative Baby</a></li> 
<li><a href="product.html">My Account</a></li> 
<li><a href="product.html" class="last">Help</a></li> 
<li class="email"><a href="product.html">email this to a friend</a></li>
<!-- END SITE NAVIGATION -->
</ul>

<!-- START LEFT SIDEBAR -->
<div id="left">

	<div class="shop-by">
	<img src="images/shop-by-brand.gif" alt="Shop By Brand" />
	<form action="product.html" method="get">
	<select name="brand">
	<option value="one">Brand Name</option>
	<option value="one">Name of Brand</option>
	<option value="one">Your Brand</option>
	<option value="one">Children's Brand</option>
	<option value="one">Brand Numero Uno</option>
	</select>
	</form>

Nice right? Here is the CSS that controls how the examples above look:

.entry .css, .entry .xhtml {
	border:1px dashed #ccc;
	float:left;
	padding:5px;
	font:12px 'courier mono", georgia, serif;
	display:block;
	margin:10px 0;
	clear:both;
	/*If you have a long line of code and don't want to to make the box expand outside 
	of the elemnt you are putting your code in, set a width here and set the overflow to scroll
		   width:450px;
	       overflow:scroll;
	*/
	}
	
.entry .css em, .entry .xhtml em {
	color:#666;
	text-transform:uppercase;
	font:10px 'trebuchet ms', arial, sans-serif;
	}
	
.entry .css strong {
	color:#AF0038;
	}
	
.entry .css code strong {
	color:#4F4F4F;
	}
	
.entry .css code em, entry .xhtml code em {
	text-transform:none;
	font:inherit;
	color:#FF6FB8;
	}
	
.entry .xhtml code strong {
	color:#1DA4EF;
	}

.entry .xhtml code em {
	color:#FFB93F;
	}

.entry .xhtml code tt {
	color:#3F61FF; 
	font-weight:normal;
	}

And here is the markup for the CSS example:

<div class="css">
<pre>
<em>/*Center Content Depending on screen size/resolution*/</em>
    <strong>#container</strong> {
	<code><strong>position</strong>:<em>relative</em>;
	<strong>width</strong>:<em>800px</em>;
	<strong>margin</strong>:<em>0 auto</em>;</code>
	}


<em>/* LOGO, Searchbox, Product Links*/</em>
<strong>#header</strong> {
	<code><strong>float</strong>:<em>left</em>;
	<strong>width</strong>:<em>800px</em>;
	<strong>clear</strong>:<em>both</em>;
	<strong>background</strong>:<em>url(images/top-border.gif) 
bottom left no-repeat</em>;
	<strong>padding-bottom</strong>:<em>25px</em>;</code>
	}
	
<strong>#header h1#logo</strong> {
	<code><strong>float</strong>:<em>left</em>;
	<strong>width</strong>:<em>195px</em>;
	<strong>height</strong>:<em>65px</em>;</code>
	}
</pre>
</div>

Not too bad right? We lose all the cluttery span classes, <br /> and inline styles.

Some things to remember when using this process:

1. To have the comments styled and avoid using a span, what I have done is left comments outside of the <code> tags and wrap them in a em. So if you have a comment in the middle of your code sample you will need to end the <code> before the comment and restart it after.

2. If you have code samples that have long lines of code, either make sure you make a line return to shorten the width and drop it to the next line OR set a width in the CSS for the <div>s that surround the sample to your max width, and set the overflow property to scroll.

I've created two different samples for you to check out. Feel free to download (right click "save as") the pages and use the styles as you wish! Also, this isn't just limited to CSS and XHTML, you can easily do this with PHP, ASP, Javacript - you name it.

CSS girl sample (the styles I've used here) | Dark theme

Jump to Comments

One Response to Style Your Code Samples Without Excessive Markup

  1. Hi it’s me, I am also visiting this web site on a regular basis, this web page is truly good and the people are truly sharing pleasant thoughts.

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact CSSgirl

Services Provided:

  • Photoshop - Website, e-commerce and Blog Design
  • Coding - Pixel Perfect HTML/CSS
  • CMS Intergration - Wordpress, Movable Type, Expression Engine

Hear from satisfied CSSgirl clients:

"Lindsey went above and beyond to get our site up and running! She took care of us from start to finish and will be working on our next sites. Lindsey was there and continued to be there to help us out and answered all our questions." - JFXOnline Read More