Click here to Skip to main content
Full site     10M members (33.5K online)    

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:  
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
 
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).
 
:)
 
You must Sign In to use this message board.
Search 
Per page   
QuestionUsing PRE tags on Code Project Pin
sunil-ddd
15 Feb '13 - 7:42 
GeneralMy vote of 5 Pin
Christian Amado
1 Aug '12 - 5:59 
Question&lt;pre linecount="true" countstart="100" countincrement="10"&gt;...&lt;/pre&gt; Pin
Andreas Gieriet
3 Jun '12 - 2:50 
GeneralRe: good stuff! I thought in hindsight that I was being a little... Pin
jim lahey
12 Apr '11 - 22:18 
GeneralReason for my vote of 3 sssss Pin
cslin0907
6 Dec '11 - 20:27 
GeneralReason for my vote of 5 Great article. Please keep it up! Pin
Mihai MOGA
6 Oct '11 - 18:49 
GeneralReason for my vote of 5 good information about code formatti... Pin
Ali Fakoor
2 Oct '11 - 2:22 
GeneralReason for my vote of 5 superb. we still need an article on ... Pin
jim lahey
12 Apr '11 - 4:50 
General Hello My name is miss marry fred i am searching for a n... Pin
marry30
28 Mar '11 - 19:14 
GeneralReason for my vote of 5 A very useful article. Pin
BarrRobot
21 Mar '11 - 14:23 
GeneralReason for my vote of 5 Excellent! Pin
Eduard Keilholz
18 Mar '11 - 5:27 
GeneralThe syntax highlighter may have changed since you posted thi... Pin
AspDotNetDev
14 Mar '11 - 10:39 
GeneralReason for my vote of 5 Excellent buddy, Thanks. Pin
thatraja
5 Mar '11 - 2:52 
GeneralThanks for sharing. Absolutely nice. Pin
Jyothikarthk
16 Jan '11 - 20:20 
GeneralThanks, Luc. Pin
Walt Fair, Jr.
13 Jan '11 - 14:19 
GeneralLuc, Brilliant pal. 5ing you! Pin
Dalek Dave
13 Jan '11 - 12:18 
GeneralReason for my vote of 5 Thanks for sharing. Pin
linuxjr
13 Jan '11 - 8:16 
GeneralReason for my vote of 5 Now it's more clear! Thanks for shar... Pin
Tarun.K.S
13 Jan '11 - 6:23 
GeneralReason for my vote of 5 good to see some, well constructed "... Pin
Simon_Whale
28 Jun '10 - 4:35 
GeneralList of language attribute values Pin
Indivara
13 Jan '11 - 14:51 
GeneralThis is the kinf of stuff that is cool! Pin
Dalek Dave
13 Jan '11 - 12:21 
Questionlinecount attr. not working ? Pin
Xmen W.K.
10 Jun '10 - 7:05 
GeneralMake XML-style quotation marks Pin
SAKryukov
14 Jan '10 - 6:00 
GeneralSmiley bug Pin
Luc Pattyn
3 Sep '09 - 12:45 
GeneralEdited it - works fine Pin
DaveyM69
3 Sep '09 - 12:26 
GeneralPre tags worked for me Pin
DaveyM69
3 Sep '09 - 12:22 

Last Updated 16 Mar 2011 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2013