Style Your Code Samples Without Excessive Markup

Comments Off

Posted on 18th May 2008 by Lindsey in internet |Uncategorized

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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
s. Other times the site just wraps the code in a 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:
    class="sitenav">
  • href="product.html" class="first">
    • Registry
  • href="product.html">
    • Innovative Community
  • href="product.html">
    • About Innovative Baby
  • href="product.html">
    • My Account
  • href="product.html" class="last">
    • Help
  • class="email">href="product.html">
    • email this to a friend
    id="left">
    class="shop-by"> src="images/shop-by-brand.gif" alt="Shop By Brand" />
    action="product.html" method="get">

    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:

    class="css">

    /*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;
        }

    Not too bad right? We lose all the cluttery span classes,
    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 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 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

    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

    No comments yet.

    Sorry, the comment form is closed at this time.