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 Source button ) 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 or C++  C++
cs or C#    C#
Delphi      Delphi
VB, VB.NET, VBscript
java        Java
JavaScript  JavaScript
Kotlin      Kotlin
SQL 	    SQL
Swift       Swift
midl 	    Microsoft IDL
asm 	    Assembly
msil 	    MSIL
perl        PERL
Python      Python
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

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 < symbol while pasting" checkbox (or something similar) in the forums. Pasting code in Q&A normally does it automatically, at the same time it adds PRE tags. When the < > & 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:

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

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).

:)