Editing Wikitext/Preformatted Text

Pre-formatted text is text that retains the user's original spacing and wrapping, which may not conform to typical web-page layouts. This format is often dictated by the context from which it originates, such as poetry, prose, lyrics, or programming code.

In contrast, un-formatted text relies on the software to handle text wrapping and line spacing. For instance, in wiki markup, only a single space is allowed between words or after punctuation, and one linebreak is ignored, with two line breaks required to start a new paragraph.

True pre-formatted text "preserves white-space," meaning it displays text exactly as it was typed. Several HTML-like tags are available for different kinds of pre-formatted text, preserving white-space to varying degrees, each with unique characteristics.

Pre-formatting tags

The <pre> tags provide the most general method for displaying pre-formatted text. The text to be displayed is simply enclosed in these tags and the text will appear on a grey background with a dashed blue border. An example of source code:

<pre>
The time has come
the walrus said to
speak of many things...
</pre>

that would display like this:

The time has come
the walrus said to
speak of many things...

A short experiment will confirm that without the tags, the lines would all display as one single line of text.

<Pre> tag summary:

• They are simple to use; as such, their shortcomings are easily dismissed.
• The format looks contrived; in that it does not entirely match any page format.
• It uses the whole width of the page; even for a word or two, unless the tags are in-line styled.
• Nesting pairs of pre tags will corrupt a layout; the inner pair need to be literals. See below.
• Long lines do not wrap; though this has been corrected for recent browser versions.
• The tags can be styled with CSS properties.
• Pre-formatted text tags cannot be used within Wiki or other lists.

Nested tag problem

When a block of text within <pre> tags contains its own <pre> tags, it can cause display issues, as the browser interprets the first closing tag it encounters instead of the last. To avoid this and similar problems (e.g., with <nowiki>...</nowiki> tags), the tags must be written in their literal form rather than their usual HTML tag format.

A literal form is treated as text and not interpreted as a functional tag. To create a literal, you only need to replace all the symbols, i.e., the “less than” (<) and “greater than” (>) symbols, with their corresponding HTML character codes: < and >. This technique applies to various tags, and a table below shows some of these conversions. Notice that literals start with an ampersand symbol (&) then add other characters to it; finally a semi-colon is added. See also mw:Help:Special characters.​

Additionally, if you need to display a literal itself on the page, further formatting is required using <nowiki>. For more details, look at the page markup or consult documentation on other wikis.

Literals for selected HTML tags

HTML tag format	Literal tag format
<pre>	&lt;pre&gt;
</pre>	&lt;/pre&gt;
<nowiki>	&lt;nowiki&gt;
</nowiki>	&lt;/nowiki&gt;

Styling tags

The appearance of tags, such as <pre>, can be modified using CSS styling. To apply styles, a CSS expression is added within the opening tag. This allows you to adjust various aspects of the text format, such as size, color, and spacing. For example, you can use the following CSS to transform the basic <pre> layout into a smaller box with colored text:

<pre style="white-space:pre-wrap; width:25%; border:1px solid lightgrey; background:ivory; color:blue;">
The time has come
the walrus said,
to speak of many things...
</pre>

Will display like this:

The time has come
the walrus said,
to speak of many things...

To center the box in the page, use the same wikitext, dropping the whitespace property, within a single table cell, and shift the outer containing table to center. When this method is used, the width setting should belong to the outer table. The revised code for a box that can be center-aligned on the page is shown below, with the result:

{| width=25% align=center
|<pre style="border:1px solid lightgrey; background:ivory; color:blue;">
The time has come
the walrus said,
to speak of many things...
</pre>
|}

Will display like this:

The time has come the walrus said, to speak of many things...

Browser pre-wrap test

When listing code lines, some lines may exceed the page width, causing text to spill out of the box and extend far to the right since the text must be displayed just as it was typed. To prevent this, a conditional form of pre-formatting can be used. By adding the style property white-space: pre-wrap; to the pre style expressions above, long lines will automatically wrap while preserving other whitespace.

All web browsers, except the outdated IE11, support the white-space: pre-wrap; property.

To check whether your browser supports pre-wrap, look at how it 'printed' the test box below. If your browser handles the white-space: pre-wrap; property correctly, the long line of text (first line following the heading) should wrap within a 400-pixel wide box.

BROWSER PRE-WRAP TEST --------------------- If your browser can handle the pre-wrap feature, then this first sentence of un-formatted text will be wrapped in this 400 pixel-wide box, while the spacing of the remainder will be preserved. a b c d e f g h i j k l m n o p q r s t u v w x y z If your browser is not compatible, the long line of text in the first sentence above will spill over and extend far beyond the margins of the box, or the box will be extended to the right margin.

The poem tags

Poem tags are designed for poetry and prose, though they can be adapted for code listings. They allow the use of a single line break to start a new line (typically two newlines are required to start a new paragraph). In addition, a new line can be started with a space.

The spacing rules for punctuation remain the same as for un-formatted text, and the wikitext formatting using apostrophes is still honored; three pairs for bold, two pairs for italics. Headings are possible, provided that HTML heading codes are used, i.e. ======. The tags do not prevent wikitext from being parsed and executed in the way <nowiki> tags do, and tables will remain active when their code is placed inside poem tags.

<Poem> tag summary:

• Space is generally not preserved; it is parsed like un-formatted text.
• Single hard returns make a new line; this is needed for prose.
• Leading spaces for lines are permitted; not like un-formatted text.
• Wikitext apostrophe codes still work within the tags; italics, bold, etc.
• HTML tags generally work within poem tags; though wiki headings do not.
• Templates and tables are not prevented from being parsed and executed; as long as there are no <nowiki> tags they will run normally.
• Long lines will be automatically wrapped; useful for code listings.
• The tags can be styled with CSS properties; Default formats resemble the page.
• Poem tags cannot be used within lists.

To display prose or poetry, or indeed any text that benefits from these formats, simply write the code as in the example below:

<poem>
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
</poem>

The result is just as expected:

One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...

Notice that the formats resemble those used for the main page, and that single line breaks have been used.

Styling the poem tags

To style the <poem> tags, a CSS style expression can be placed in in the leading tag. Some code can also be placed in a containing table cell to shift the block on the page. The following code listing can color the contents and shift the poem to the center of the page. The width of this block adjusts to the contents so some work may look inconsistent in width ; for a version with an independent width setting, place a width attribute in the table line and adjust the padding; see the CSS code summary in the last section for a list of these properties and others.

{| cellspacing=0 align=center
|<poem style="padding:15px 15px 15px 15px; background:lightyellow;color:maroon;border:1px solid gray;">
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
</poem>
|}

The result is;

One, two, three, four, five, Once I caught a fish alive. Six, seven, eight, nine, ten, Then I put it back again...

Poem tags for code

A more complex example, this time to illustrate the automatic wrapping of long code lines is provided below. This time, the code block must be enclosed in <nowiki> tags to prevent the code from making a table on the page. As in the above section, a table container was added to permit alignment on the page, and details of the styles are shown. This time the code is all arranged in the table line as follows:

{| style="background:rgb(230,230,230);color:black; border:1px solid gray; font-family: fixedsys;" cellpadding=20px cellspacing=0 align=center width=80%
|
<poem>
<nowiki>
The code block goes here...
</nowiki>
</poem>
|}

An example of such a display is just:

Wikitext Table Code Module {| style="background:lightyellow; color:black; border:1px solid gray; font-size:inherit; font-weight:normal; font-family:inherit;" cellspacing=0 cellpadding=5px align=left width=70%   |+ Top Caption Goes Here |-   ! style="background:brown;color:white;border-bottom:1.5px solid black"|Heading 1   ! style="background:brown;color:white;border-bottom:1.5px solid black"|Heading 2   ! style="background:brown;color:white;border-bottom:1.5px solid black"|Heading 3 |-   | width=33% style="border-bottom:1px solid gray"|A   | width=33% style="border-bottom:1px solid gray"|B   | width=33% style="border-bottom:1px solid gray"|C |-   | style="border-bottom:1px solid gray"|D   | style="border-bottom:1px solid gray"|E   | style="border-bottom:1px solid gray"|F |-   | style="border-bottom:1.5px solid black"|G   | style="border-bottom:1.5px solid black"|H   | style="border-bottom:1.5px solid black"|I |}

Notice that the long code lines, notably the table's top line and the heading lines, have been automatically wrapped, (without any need for a pre-wrap property value).

The <code> and <syntaxhighlight> tags

The <code> tags are useful when discussing small chunks of source code within a line of normal text. For example, "the infamous <code>gets()</code> function" is rendered as "the infamous gets() function".

The <syntaxhighlight> tags allow the display of pre-formatted code modules, but in addition they add coloring to the various elements of the code. Like the <pre> tags, they preserve white space, that is, they depict the code module exactly as it was typed.

When line numbering is in use, (the default state), long code lines will be wrapped and the code will be not extend beyond the boundaries of its container. To see code wrapping with these tags, refer to the examples below.

There are color plans for most programming languages, and a line is added to the leading tag to indicate what it is. See mw:Extension:SyntaxHighlight for the code colouring and numbering full list. Since 2023, "wikitext" can be used for lang that will highlight common syntaxes in wikitext.

Numbering is added by writing the word line somewhere within the leading tag. The numbering is applied to every line, but the starting number need not be one; it can be preset by adding the further entry, e.g. start=10, to start as line 10. If the line number is not given then the default applies and lines are numbered from one. When lines are copied for pasting elsewhere, the numbers are not copied; only the lines of text.

Programming code that is placed in the <syntaxhighlight> tags, and then copied from a Wikibooks page, can be pasted directly into a word processor without any loss of quality. This is useful for those who want to write documentation.

 tag summary:}}
*The tags ''add color'' to enclosed code blocks; many language color plans exist.
*Consecutive numbers can be added to lines automatically; the first number can be preset.
*Highlighting of blocks of consecutive lines is possible.
*When line-numbering is used, any long lines of text will wrap; there is no wrapping unless line-numbering is set.
*Plain text exists as an option; so that Wiki or other text can be numbered too.
*The tags cannot be styled; place everything in a table cell and style ''that''.
*Line numbers are not copied; only the text line is copied during copy/paste.
*''syntaxhighlight'' tags cannot be used within ''lists''.

=== HTML code colors ===
The following example shows how to color an HTML code listing and to arbitrarily start numbering from 10.  Additionally, the lines could be highlighted with an entry like <code>highlight="2-3”</code>, which will highlight lines two and three. The term <code>enclose="none"</code> serves to removes the margins and whitespace.
{{block|ta=left|background=ivory|ff=monospace,sans-serif|fs=1.1em|<poem><nowiki><syntaxhighlight lang="html4strict" enclose="none" line start=10 >
HTML module goes here...

</nowiki></poem>

A typical result for a short HTML table coding is:

<table align=center style="background: ivory;color:maroon;font-style:italic;font-family:arial;font-weight:bold;font-size:10pt;"> 
<caption>This is the top caption</caption>
<tr><th> Heading 1 </th><th> Heading 2 </th></tr>
<tr>
<td style="padding:10px;"> This is cell 1 text </td>
<td style="padding:10px;"> This is cell 2 text </td>
</tr>
</table>

Numbered prose

The following example shows how to add numbers to poetry, prose or text, and start numbering lines from, for example, 1000. Note that another method for this exists in Editing Wikitext/Indents and Lists § Other Ordered Lists.

<syntaxhighlight lang="text" enclose="none" line start=1000 >
Poem goes here... (let the software format any long lines).
</syntaxhighlight>

A typical result is just:

One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...

The syntaxhighlight tags do not permit any easy styling, but like the examples in the sections above, a table can be used as a container for the entire listing and that can be styled. An example of such a layout for numbered text is as follows:

{| style="background:ivory;color:black; border:1px solid gray; font-family: Inherit;" cellpadding=20px cellspacing=0 align=center width=40%
| <source lang="text" enclose="none" line start=1 >
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
</source>
|}

The result of running this code in the Wiki editor is:

One, two, three, four, five, Once I caught a fish alive. Six, seven, eight, nine, ten, Then I put it back again...

Thus, a styled layout for numbered prose is possible, and formats are easily changed. Another method for numbered lists, e.g. prose, can be found by following the link Editing Wikitext/Indents and Lists § Other Ordered Lists.

Older versions of Extension:SyntaxHighlight used the tag <source>. This is still supported, but <syntaxhighlight> may help avoid conflicts if your source code itself contains <source> tags (for example XML).

For a full text on CSS styles, refer to CSS Properties Reference.

CSS Table Properties Summary

For those who intend to make use of tables in their work, the main CSS properties and HTML attributes have been summarized.

CSS Properties Summary Commonly used style rules for Wiki markup tables : There are two different sets of style rules in use; a set of HTML attributes that is associated with the specific elements in tables, and a Cascading Style Sheet set, CSS properties, that is of more general use. Each of table, caption, row, and cell can be considered as separate elements in the more general building of tables. In each case where an attribute refers to the same format as a CSS property at the same level of the same element, the CSS property takes priority. A short list of each style-set is given for quick reference though these listings are by no means complete. A link has been provided at the bottom of this drop-list for a full CSS properties reference. HTML Attributes for Tables; use the format; attribute1=value1 attribute2=value2 attributeN=valueN Example Values Element* Purpose >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> align=left** left,right,center, T, R, C positions table or text** (plus justify for text) in immediate container valign=top**** top, middle, bottom R, C vertical alignment of TEXT border=1***** 0 for none, 1-7 T all borders at once cellpadding=5px 0 for none, px, pt, em T padding for all cell text with one entry cellspacing=5px****** 0 for none, px, pt, em T between all table cells with one entry height=100px*** px, pt, cm, em, % C cell height, though likely to increase with contents width=200px*** px, pt, cm, em, % T, C table or cell width colspan="2" number of columns. C joins cells rightward rowspan="2" number of rows. C joins cells downward >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * T=Table, R=Rows, C=Cells of any kind ** Align in cells applies horizontal text-alignment. *** If not specified, the dimensions will adjust to the text. **** If not specified, the default is middle ***** Do not use border spacing styles with this attribute; only ''cellspacing''. ****** Do not use border styles with this attribute; only the ''border'' attribute. CSS Style Rules; use the format; style="property1:value1; property2:value2; propertyN:valueN;" Example Values Elements** Purpose >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> caption-side:top top,right,bottom, T only some browsers and left text-align:right left,right,center, T, R, C horizontal alignment of text and justify vertical-align:top top, middle, bottom C Vertical-align text or image background:yellow name, rgb, hex, T, R, C background color and transparent color:blue name, rgb, hex T, R, C text color mix-blend-mode:multiply mode T blend mode >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> font-family:arial font or family name T, R, C font or font-list font-size:20pt px, pt, cm, em, % T, R, C text size font-style:italic italic, normal T, R, C text style font-weight:bold bold, normal T, R, C text weight >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> padding:5px 0 0 0 px, pt, cm, em T, C sequence top,right,bottom,left margin:0 0 5px 0 px, pt, cm, em, % T sequence top,right,bottom,left border:2px solid red* width, type, color T, C border on all four sides border-collapse: separate or collapse T cell spacing or not border-spacing:10px px, pt, cm, em T cell spacing all-round border-spacing:7px 5px px, pt, cm, em T in form horizontal vertical table-layout:fixed auto or fixed T expands with text or not width:400px px, pt, cm, em  % T, C sets table or cell width height:200px px, pt, cm, em  % T, C sets table or cell height >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> line-height:2em*** px, pt, cm, em T, R, C height between text lines letter-spacing:5px px, pt, cm, em T, R, C space between text characters word-spacing:10px px, pt, cm, em T, R, C space between words of text white-space:pre-wrap browser issues T long line text wrapping,(soon) >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * Separate border properties also exist; border-top,border-right,border-bottom, and border-left. ** T=Table, R=Rows, C=Cells of any kind *** Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>, <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>. Line-height fails within a <span>. Style Expression Spacing Rules for WIKITEXT Main Points to Avoid Line breaks are not permitted within style expressions. Let the software do the wrapping. Spaces are not permitted immediately before colons or semi-colons. These have Latitude Space between the various table symbols and the word style is OK. Space around any equals symbol is OK. Space between the style rules and their outside parentheses is OK. Spaces after colons and semi-colons are OK. A semi-colon can be placed immediately after the last style rule. In addition Compound values like '2px solid black' must be space-separated. HTML attributes must be separated from CSS style expressions with space. HTML element line-spacing is permitted but not for Wikitext elements. Wikitext and HTML table elements can be indented for clarity. Long lines in code LISTINGS can wrap only if there are some spaces added. Combining the two style rule methods: It is possible to mix the attributes with CSS styles provided that they keep to their own local formats. That is to say; nothing with an equals sign between the quotes, and no CSS rules outside of them. Note that the Wiki apostrophe codes and various HTML tags can still be used directly on text. An example of mixed styles is shown below. {| border=1 width=300px style="background:lightyellow;color:maroon;" | height=100px| <u>''First''</u> cell | style="background:black;color:white;" width=200px align=center|''Second'' cell |} Priorities for Inline Styles. When there is a contest at the same level between an attribute and a style, the style will have priority. When two similar properties exist in a style expression, each having a different value, the second value will be taken. When there are two entire style expressions in the same table line, the second is ignored. The same situation applies for two similar attributes in a line; the second is ignored. Refer to CSS Reference List for more detailed descriptions of properties and values.