Displaying Code Correctly
When you are displaying code on your website, such as code for a link button or a layout, it is important to use the correct markup.
It has been commonplace to use <textarea>. However, this should not be done because textarea is intended for user input in structures such as email forms and comment forms.
This is why you might have noticed websites displaying code in such a way that you can edit what’s in the box, perhaps with an accidental press of a key, leaving the user a little more than baffled at how to get it back (they might not be familiar with refreshing).
Some people also choose to add spaces between the coding and make a note to “remove the spaces”. Not only is this annoying for visitors but it can be quite messy.
There is a better and correct alternative. The correct way to display code is by using <code>, or <pre> for larger blocks of text.
Firstly you will need to use a converter to convert the HTML code into its entities, so that the HTML doesn’t display as part of your page, but will display the raw HTML code. You can use this converter (code from Jem).
After that you will need to display the code between <code> and </code>, for example:
<code> <a href="http://heartdrops.org">Heartdrops</a> </code>
The code simply needs to be displayed like that.
With larger blocks of text, use <pre> around the code.
You will need to update your CSS when using <pre>. You need to add overflow: auto; to your stylesheet so that scrollbars are enabled and so that code won’t go running amok. You can also set a width and height and other properties as well:
pre {
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid #000;
padding: 10px;
color: #808080;
}
Additionally, <code> can be dressed up in the same way. You can even choose a font.
code {
color: #ff0;
font: normal 100% arial;
background-color: #eee;
}
Further links:
