Tag Archives: pre tag

Four New Articles on Dressing Up Your Posts and Pages!

Let’s face it: The internet reader’s attention is hard to grab. They scan the page and if they don’t see something interesting they are gone, all in 10 to 15 seconds. How do you get the reader to look at your post or page and read past the first couple of sentences?

One key way is to make your article attractive to the eye — it pulls the reader in and keeps her reading.

Today I have put up 4 new posts on different aspects of dressing up your posts and pages. All are located under the “Tips” category “Posts & Pages:”

Dressing Up Your Posts and Pages” is the main article in the group and shows you how to really make your article pop on the page. It has sections on the following subjects essential to an attractive-looking post or page:

  • Drop caps
  • Images
  • Screenshot and code illustrations in your posts and pages
  • Adding section titles
  • Adding pullquotes
  • Using callout or highlight boxes
  • Software helpers

Make Your Pullquotes More Attractive” shows you in detail how, why and when to use pullquotes. It includes code to enhance the way your pullquotes look, how to put pullquotes into your text, and 7 tips on how to use pullquotes.

Many times you might want to use code in your post or page, or you might have a text snippet that you want users to copy. “Using the code and pre Tags for Code and to Highlight Text” gives you what you need to do this quickly and easily. It has code to put into your custom.css to make your use of the “code” and “pre” tags more legible and attractive, and shows you how to use these tags in the WordPress editor.

Finally, “Finding Legal Images for Your Posts” gives you a great deal of information on how to find free and legal images for your posts and pages. There is a list of great sites on the internet where you can find images, and it provides guidelines for understanding copyright, conditional use, Creative Commons, and fair use.

Armed with these 4 articles, you can your posts and pages more visually appealing, enhance your readers’ experience, and keep your readers coming back for more!

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.