Using the code and pre Tags for Code and to Highlight Text
Thesis provides two ways to display code in your posts and articles. Each sets the code apart in a different way. The “pre” tag is used for longer pieces of code, and will scroll to the right if it is wider than your column width. The “code” tag is intended for shorter bits of code that are inserted inline into the text of your post. It will not scroll if your code is longer than the screen width.
But their use is not limited to code; you can use them to highlight any kind of text you want. For instance, if you have a text excerpt that might be copied by the user, you can use the “pre” tag for it.
This article gives you a simple enhancement of the “code” and “pre” tag styling for your custom.css file, and shows you how to use the tags in the editor.
Adding styling to “code” and “pre” in custom.css
The stylings in style.css for “pre” and “code” both are pretty stark, and do not make the code font a monospace, making it hard to read. Following is the styling I use for the examples in this article. Just insert them into your custom.css file. Feel free to modify them to suit you:
/* PRE TAG STYLING FOR CODE INSERTS INTO PAGES AND POSTS */
.custom pre {
font-size: 1.5 em;
font-family: Courier, "Courier New", mono;
color: #000000;
margin: 10px;
padding:10px;
border: solid 1px #FFCF81;
background: #F8FFC0;
}
/* CODE TAG STYLING FOR CODE INSERTS INTO PAGES AND POSTS */
.custom code {
font-size:1em;
line-height: 1em;
font-family: Courier, "Courier New", mono;
color: #000000;
background: #EEEEEE;
}
How to use “code” and “pre” tags
You will use the HTML editor to insert the proper code for each.
Using the “code” tag
As mentioned, the “code” tag is intended for inserting code inline into a sentence. For example, this bit of code: font-size: 1em uses the “code” tag. Here’s how you do it:
1. Find the code to be highlighted in the sentence.
2. Wrap the code in "<code>" and "</code>" tags like this:
<code>font-size: 1em</code>
Using the “pre” tag
The “pre” tag is used for longer pieces of code and will scroll if it is longer than the width of the column. To use the “pre” tag:
1. Find the code to be highlighted.
2. Wrap the code in "<pre>" and "</pre>" tags like this. Note the very long line causes the scroll bar to appear:
<pre>
.custom blockquote.left {
width: 200px;
margin: 5px 15px 5px 0;
padding: 5px 0;
border: 3px double #aaa;
border-width: 3px 0;
font-size: 1.4em;
text-align: center;
float: left;
}
.custom blockquote.right { width: 200px; margin: 5px 0 5px 15px; padding: 5px 0; border: 3px double #aaa; border-width: 3px 0; font-size: 1.4em; text-align: center; float: right; }
</pre>
I hope this short article has been helpful to you. Remember that your comments are always welcome, and that you can contact me directly by clicking on the “Contact” button in the menu.
