▲ Computer

Displaying code in the <pre> HTML tag (23/01/13)

Suppose you want to display some program code in a nice monospaced font, inside a box, like this:

int main()
{
	printf("hello, world");
}

This can be easily done using the <pre> tag. First, define a nice CSS style, such as:

pre.code{
	margin-left:40px;
	margin-right:40px;
	border:1px solid black;
	padding:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius:5px;
	background-color:#EEE;
	overflow-x: auto; /* used so scrollbar appears for long lines */
}

Then, put any code you want into the <pre> tag like this:

<pre class="code">
int main()
{
	printf("hello, world");
}</pre>

Caveat: for the symbols ", <, >, &, make sure to use the corresponding HTML codes (&quot;, &lt;, &gt;, &amp;). There may be others.

▲ Computer