Click here to Skip to main content
16,017,207 members
Articles / Web Development / HTML
Tip/Trick

Using PRE tags on Code Project

Rate me:
Please Sign up or sign in to vote.
4.93/5 (66 votes)
16 Mar 2011CPOL3 min read 170.6K   41   38
How to use PRE tags to preserve formatting, and improve readability of code snippets or tabular data in posts.

Having trouble writing or posting articles? These articles aim to gather together tips and tricks from authors and mentors to help you write great articles.

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

HTML
<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:

HTML
<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:

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


:)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Belgium Belgium
I am an engineer with a background in electronics, software and mathematics.

I develop technical software, both for embedded systems and for desktop equipment. This includes operating systems, communication software, local networks, image processing, machine control, automation, etc.

I have been using all kinds of microcontrollers and microprocessors (Intel 4004/8080/8051/80386/Pentium, Motorola 680x/680x0/ColdFire/PowerPC, Microchip PIC, Altera NIOS, and many more), lots of programming languages (all relevant assemblers, Fortran, Basic, C, Java, C#, and many more), and different operating systems (both proprietary and commercial).

For desktop applications and general development tools I have been using both UNIX systems and Mac/MacOS for many years, but I have switched to x86-based PCs with Windows, Visual Studio and the .NET Framework several years ago.

I specialize in:
- cross-platform development (making software that runs on diverse hardware/OS combinations)
- instruction set simulation
- improving software performance, i.e. making sure the software runs the job at hand in as short a time as possible on the given hardware. This entails algorithm selection, implementation design, accurate measurements, code optimisation, and sometimes implementing virtual machines, applying SIMD technology (such as MMX/SSE), and more.

Comments and Discussions

 
QuestionUsing PRE tags on Code Project Pin
sunil-ddd15-Feb-13 7:42
sunil-ddd15-Feb-13 7:42 
AnswerRe: Using PRE tags on Code Project Pin
Luc Pattyn16-Feb-13 10:54
sitebuilderLuc Pattyn16-Feb-13 10:54 
GeneralMy vote of 5 Pin
Christian Amado1-Aug-12 5:59
professionalChristian Amado1-Aug-12 5:59 
Question&lt;pre linecount="true" countstart="100" countincrement="10"&gt;...&lt;/pre&gt; Pin
Andreas Gieriet3-Jun-12 2:50
professionalAndreas Gieriet3-Jun-12 2:50 
AnswerRe: <pre linecount="true" countstart="100" countincrement="10">...</pre> Pin
Luc Pattyn3-Jun-12 4:01
sitebuilderLuc Pattyn3-Jun-12 4:01 
GeneralRe: ... Pin
Andreas Gieriet3-Jun-12 5:16
professionalAndreas Gieriet3-Jun-12 5:16 
GeneralRe: ... Pin
Luc Pattyn3-Jun-12 5:24
sitebuilderLuc Pattyn3-Jun-12 5:24 
GeneralRe: good stuff! I thought in hindsight that I was being a little... Pin
jim lahey12-Apr-11 22:18
jim lahey12-Apr-11 22:18 
GeneralReason for my vote of 3 sssss Pin
silcer6-Dec-11 20:27
silcer6-Dec-11 20:27 
GeneralReason for my vote of 5 Great article. Please keep it up! Pin
Ștefan-Mihai MOGA6-Oct-11 18:49
professionalȘtefan-Mihai MOGA6-Oct-11 18:49 
GeneralReason for my vote of 5 good information about code formatti... Pin
Ali Fakoor2-Oct-11 2:22
Ali Fakoor2-Oct-11 2:22 
GeneralReason for my vote of 5 superb. we still need an article on ... Pin
jim lahey12-Apr-11 4:50
jim lahey12-Apr-11 4:50 
GeneralRe: Thanks. Searching a bit you could stumble on <a href="http:/... Pin
Luc Pattyn12-Apr-11 5:56
sitebuilderLuc Pattyn12-Apr-11 5:56 
General Hello My name is miss marry fred i am searching for a n... Pin
marry3028-Mar-11 19:14
marry3028-Mar-11 19:14 
GeneralReason for my vote of 5 A very useful article. Pin
BarrRobot21-Mar-11 14:23
BarrRobot21-Mar-11 14:23 
GeneralReason for my vote of 5 Excellent! Pin
Eduard Keilholz18-Mar-11 5:27
Eduard Keilholz18-Mar-11 5:27 
GeneralThe syntax highlighter may have changed since you posted thi... Pin
AspDotNetDev14-Mar-11 10:39
protectorAspDotNetDev14-Mar-11 10:39 
GeneralRe: I fixed the &lt; mistake, thanks. And no, I'm no longer tryi... Pin
Luc Pattyn14-Mar-11 11:10
sitebuilderLuc Pattyn14-Mar-11 11:10 
GeneralReason for my vote of 5 Excellent buddy, Thanks. Pin
thatraja5-Mar-11 2:52
professionalthatraja5-Mar-11 2:52 
GeneralThanks for sharing. Absolutely nice. Pin
Jyothikarthik_N16-Jan-11 20:20
Jyothikarthik_N16-Jan-11 20:20 
GeneralThanks, Luc. Pin
Dr.Walt Fair, PE13-Jan-11 14:19
professionalDr.Walt Fair, PE13-Jan-11 14:19 
GeneralLuc, Brilliant pal. 5ing you! Pin
Dalek Dave13-Jan-11 12:18
professionalDalek Dave13-Jan-11 12:18 
GeneralReason for my vote of 5 Thanks for sharing. Pin
linuxjr13-Jan-11 8:16
professionallinuxjr13-Jan-11 8:16 
GeneralReason for my vote of 5 Now it's more clear! Thanks for shar... Pin
Tarun.K.S13-Jan-11 6:23
Tarun.K.S13-Jan-11 6:23 
GeneralReason for my vote of 5 good to see some, well constructed "... Pin
Simon_Whale28-Jun-10 4:35
Simon_Whale28-Jun-10 4:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.