Displaying Your Code

Presenting your code for others to see and use, would on the surface seem pretty straight forward using the

<pre><code>
 <div class="content">
   <h1>Your Content</h1>
 </div>

CSS, Javascript PHP etc works great, But when inputting HTML elements it doesn’t seem to work you can get around this by wrapping it in a textarea,

<textarea></textarea>

but that pulls it away from your normal styling of code.

SO…..

A very simple way to get around this is by adding this very small lightweight Plugin called “Code_Markdown”.
You can download that file HERE to your desktop.
Upload to your plugins folder in the usual way and activate it.

Now to ensure it looks nice, just add the following CSS to your style sheet at the end, you play around with it to get it fitting your theme.

pre {
    width: auto;
    display: block;
    clear: both;
    padding: 1em 4em;
    margin: 40px auto;
    background: #424040;
    border-radius: 25px;
}
code {
    font-size: 100%;
    white-space: pre;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    height: 1%;
    font-family: "Courier 10 Pitch", Courier, monospace;
    line-height: 1.8em;
    display: inline;
    color: #c4aa00;
    font-weight: 200;
}

and there you have it