Article: Using PRE tags on Code Project

When publishing code or some text that needs a strict syntax (in an article, a forum message, a tip, whatever) ALWAYS use the appropriate tags, which is either CODE tags (for a small snippet, no more than one line) or PRE tags (for all multi-line snippets).

The overall advantage is better readability, and as a result reaching a broader audience and getting more and better feedback. In detail:

• CODE and PRE tags result in a non-proportional font, which preserves indentation;
• PRE tags give a nice background color (pink-ish by default), very good for contrast; BTW: CODE tags don't, they leave the background white (not so good for color contrast) or turn it blue-ish on forum messages (horrible for contrast), so I don't like them being used in conjunction with syntax coloring at all.
• CODE and PRE tags perform syntax coloring, assuming you add a LANG="some language code" to the opening tag; unfortunately without the change in background, such coloring makes CODE completely unreadable; so PLEASE set LANG=NONE for every snippet in CODE tags. For PRE tags too, the default is LANG='CPP' even in the C# and VB forums; so you really should add LANG='CS' or LANG='VB' to get the keywords recognized correctly (use single or double quotes, and upper- or lower-case).

As this is simple and very effective, I can tell you I simply no longer read code that is not tagged appropriately; if the author doesn't care, neither do I.

Here is an example (with the PRE tags shown explicitly):

<pre lang='cs'>    / * the opening PRE tag (normally not visible!) */

private static int multiply(int arg1, int arg2) {
    return arg1*arg2;
}

</pre>             / * the closing PRE tag (normally not visible!) */

Warning: If you are using a multi-mode editor, you must be in "raw mode" (click the <> ) to enter and edit HTML tags such as PRE and CODE.

And here is a list of language codes, it may be incomplete and there might be small errors, it is a dynamic thing:

text 	plain text (= no syntax coloring)
cpp 	C++
cs 	C#
vb 	VB, VB.NET, VBscript
java    Java, JavaScript
SQL 	SQL
midl 	Microsoft IDL
asm 	Assembly
msil 	MSIL
xml 	XML
html 	html
css 	CSS

Warning

It may come as a surprise however CodeProject does not take the content of PRE blocks literally, a number of HTML tags are accepted, others ignored and removed. Here is a non-exhaustive list of the ones that seem to work:

<b>text</b>   generates bold text (which can not be discerned well at all, so I don't recommend it);
<i>text</i>   italicizes the text
<u>text</u>   underlines the text

Inner warning: it may work differently or not at all in preview mode! Well, actually it mostly does not work at all, only bold works a little bit.

A huge consequence is you have to HTML-escape the special characters < and > and & i.e. you must replace them like so:

<   &lt;
>   &gt;
&   &amp;

This escaping can be performed manually (when in "raw view") or by cheking the "Encode &lt; symbol while pasting" checkbox in the forums. Pasting code in Q&A normally does it automatically, at the same time it adds PRE tags. When the &lt; symbols aren't escaped correctly, parts of the snippet may vanish, and what remains may be shown in unintended colors. When done properly it all should look like < > & in "HTML view" or in preview.

Inner warning: Depending on the browser used it may seem sufficient to escape just <, however some browsers (and I suspect some CodeProject code too) don't work well when the others are left unescaped.

Additional Features

1. You can locally change foreground or background color by using <span class='emphasis'> or <span class='highlight'>
2. You can change the entire background color by using <pre style='background-color:#DDFFDD'> or some other hex RGB value.
3. You can get the lines numbered automatically, by adding linecount='on'

Here is an example using most of the above:

<pre linecount="on" lang="cs" style='background-color:#DDFFDD'>
private int <b>multiply</b>(int arg1, int arg2) {
    return <span class='emphasis'>arg1*arg2</span>;
}</pre>

which yields:

private int multiply(int arg1, int arg2) {
    return arg1*arg2;
}

Final Words

1. Please use PRE tags for multi-line code snippets, as well as for any tabular data you want to represent.
2. Don't use CODE tags in conjunction with PRE tags. There is no need for them, the PRE tags handle it all.
3. Don't forget to HTML-escape each and every < > & inside a PRE block (unless you actually want an executable HTML tag of course).

:)