Web Tip: Sharing Single-Line Code

Sometimes, when writing on the web, you need to share a long string of code or even a URL.  You want to emphasize that the information you are showing is meant to be typed on one line, but your blogging software automatically wraps it.

It ends up looking like this:

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

When you wanted it to look like this:

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

The way to accomplish this is to use the <pre> and <code> tags.  While PRE will give you the correct formatting, CODE will (hopefully) inform the browser that you are entering code.  To get the correct formatting, however, you will need to use CSS.  I used inline styles in the above example, so you should be able to “view source” to see them, but I will also include them below.

pre {

white-space: nowrap;
overflow: auto;
font-size: 1.4em;
background-color: #e2eaed;
border: 1px dotted black;
line-height: 20px;
padding: 10px;
}

The “white-space” tag tells it not to wrap the text.  “overflow” set to auto will add a scrollbar whenever the line is too long.  The rest is just for style effect, and you can change it however you see fit.  If you want, you could even style the scrollbar.  With WordPress, you will want to include this in your CSS file to make things a little easier.

Tagged with: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.