Posting Usable Code in WordPress With No Plugins

Due to the fact that Worpress decided to get rid of the “Press It” function until 2.6, I have recently had the need to post the code that will allow you to use the “Press It” feature on your own.

As it turns out, it is supposedly very hard to post code in WordPress. If you just copy and paste your code in, WordPress will turn your quote marks into “Smart Quotes”. They look pretty, but do not work with code. So I set about finding a plugin or some other method to correct this.

Everywhere I looked people were recommending different methods. From using plugins and custom fields, to manually editing, and to online converters. I tried them all, but they either didn’t display the code correctly, or messed up my formatting site wide.

So here is my solution, it may have been suggested before, but I sure couldn’t find it with hours of searching and testing. Simply insert this code into your style sheet:

pre {
width: 95%;
overflow: auto;
padding: 10px;
margin: 1em auto;
font-family: "Courier New", Courier, mono;
background-color: #ddd;
color: #555;
border: 1px dotted #999;
}

Now, when you paste your code into the WordPress editor, highlight it, and select the preformatted option from the “Format” drop down menu.

location of the format menu in the wordpress post editor

The pre tag will preserve your quote marks, spacing, indenting, and other elements.

And thats all you have to do. Your code will work when copied and pasted from the browser. If you have a long line of code, instead of running over everything, this will make a horizontal scroll bar to contain it.

Note: WordPress may apply separate <pre> tags to each line when you select it from the drop-down menu. (I have no idea why, it defeats the whole purpose of <pre> tags) To get around this, either manually add <pre> and </pre> before and after the text under the HTML tab in the edit screen, or apply the formatting with the code all as one line, and add the line breaks in afterward.

Continue reading →

Skitch, the social internet screen shot tool

plasq.com – Skitch – Snap, Draw, ShareYour friends are global… you can send them links… but what if the action is on your screen? … Point out a quick suggestion to a colleague or pass on that funny moment from an IM chat, post images to MySpace, eBay, forums or via email..Skitch is the Internet age’s Camera and it Rocks!There are many ways to take screen shots of your desktop, from a quick series of keystrokes, to 3rd party tools of varying levels of ability and complexity. But even with advanced tools, any editing beyond cropping and resizing will require another program, and then another will be needed to share it.The developers at Plasq saw the need for a better tool, and the result is Skitch, a veritable Swiss Army knife of functionality – from capturing, to editing, and finally, uploading or embedding. Take a screen shot, crop the picture, resize it by dragging the corners of the window, draw on the picture, add some text, drag and drop it to your desktop, upload it to Flickr, insert it in your LiveJournal/MySpace/WordPress post, share it through the Skitch website, drag and drop it into an email, share it through almost any social networking site, save it as a PNG, JPG, SVG, PDF, TIF, or the native Skitch format, then view all your other screen captures in the History window – all from Skitch. Skitch can also upload to an FTP server, or share via WebDav. It’s freakin’ sweet!Like many sweet things, it’s only available for the Mac. Try out Skitch, and let us know what you think.

Continue reading →