First of all, let me say one thing…. NEVER USE A PLUGIN WHEN A BIT OF CSS WILL DO THE TRICK! Great… now that I’ve got that off my chest. No seriously, we all should strive to have the cleanest, most pristine WordPress sites we can possibly have. This means running lean-and-mean on the plugin front and ONLY installing ones that we absolutely-without-a-doubt-must-have.
Now, you want to add a code snippet to your WordPress blog post and have it nicely formatted so that it stands out from the rest of your text (like the code below) AND gives your readers the ability to cleanly copy and paste it for their own uses. Cool… this is how you do it… WITHOUT adding a plugin =0)
WORDPRESS CODE IDENTIFIERS
First of all, there are 2 main tags (or identifiers) that WordPress uses to designate text as a line of code or a blog of several lines of code. These are:
- code – This identifies a single line as code
- pre – This identifies a blog of several lines as code
Since most of the time we are referencing multiple lines, we’ll only focus on the PRE tag in this post, but the same holds true for customizing the CODE tag as well. So the first thing you’ll want to do is locate the <pre> statement in the CSS stylesheet for your theme (this is usually style.css). Depending on how the theme author coded up your css styling, it may also be located in some other file of a different name… so the point is to keep looking until you find it.
Another option you MIGHT have is that many times, theme authors will give you the ability to enter CSS code into the Theme Options settings of your theme. This is VERY CONVENIENT and allows you to enter new css styling WITHOUT having to actually make coding changes directly to the stylesheet files themselves.
NOW ADD YOUR CUSTOM STYLING
Once you have located the PRE tag (or are going to enter your override code into Theme Options), enter the following code
pre {
overflow: auto;
border: solid 1px #9AACAE;
font-family: courier,Georgia,Serif;
color: $(body.text.color);
background: #EFEFEF;
margin: 5px;
padding: 5px;
}
Once you save the stylesheet or theme options entry, you’re now ready to enter your code snippets into your blog post, select the snippet itself and select the PRE styling from the pull-down list in your WordPress editor. Additionally, if your in the TEXT mode entry of the WordPress editor, you can simply enter a <pre> tag at the beginning of your code blog and a closing </pre> tag at the end.
That’s it! save your post and VOILA!… you have a really AWESOME formatted text blog (like the one above) that gives your readers the ability to easily copy and paste your GREAT coding samples!
BTW… a quick shout-out to Patanachai as I lifted this styling sample from him… THX!
