Editing Wikitext/Preformatted Text: Difference between revisions
[unreviewed revision] | [pending revision] |
c/e |
|||
(39 intermediate revisions by 14 users not shown) | |||
Line 1: | Line 1: | ||
{{Editing Wikitext|bd=linen}} |
{{Editing Wikitext|bd=linen}} |
||
{{thetop|w2=75%|w3=0%|bd=beige|1= __TOC__ |2=<h2> Pre-formatted Text </h2> |
|||
'''Pre-formatted text''' is text that has been wrapped and additionally spaced by the user. It has spacing in it that is contrary to the preferred web-page layout, usually because its format has been determined in the culture from which it was obtained. It is seen mainly in writing for poetry, prose, lyrics, and most of all, in the listing of programming code. |
|||
{{TOC}} |
|||
It is distinguished from the more usual ''unformatted text'', where the software takes care of wrapping text while the user just keeps typing. Unformatted text also depends on the software to handle line spacing, and to remove any extra spaces between words. As the reader will be aware, the Wiki software permits only one space after punctuation or between words, and will ignore a single line space, needing two of these to make a new paragraph. |
|||
'''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 [[w:Line_wrap_and_word_wrap|text wrapping]] and [[w:Line_spacing|line spacing]]. For instance, in [[Wiki Markup|wiki markup]], only a single space is allowed between words or after punctuation, and one [[w:Linebreak|linebreak]] is ignored, with two line breaks required to start a new paragraph. |
|||
True pre-formatted text is said to ''preserve whitespace'', because it must display text exactly as it is typed. However, a number of HTML-like tags have been made for other kinds of pre-formatted text; these preserve whitespace to varying extents and each has characteristics of its own.|3= }} |
|||
<!-- '''&lt;pre&gt;''' and '''&lt;/pre&gt;''' --> |
|||
<div style="background:rgb(255,243,228); padding:10px; border: 1px solid lightgrey;"> |
|||
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.{{clear}} |
|||
== Pre-formatting Tags == |
|||
The ''pre'' tags provide the most general method for displaying pre-formatted text. The text to display is simply enclosed in these tags and the text appears in a grey background with a dashed blue border. For example, when this code is typed in the editing window; |
|||
== Pre-formatting tags == |
|||
{{block|ta=left|background=ivory|<pre style="background:transparent; border:none;"> |
|||
{{Notice|{{clear}} |
|||
* Nesting pairs of {{tag|pre|open}} HTML tags will disrupt the HTML output, the inner pair need to be in their ''literal'' form. See [[#Nested tag problem|§ Nested tag problem]]. |
|||
*{{tag|Pre|open}} ignores wikimarkup. |
|||
*{{tag|Pre|open}} displays in a mono-spaced font, and does not reformat text spaces.}} |
|||
The {{Tag|pre|open}} 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: |
|||
{{block|ta=left|background=ivory|<pre style="font-size: 1.1em; background:transparent; border:none;"> |
|||
<pre> |
<pre> |
||
The time has come |
The time has come |
||
Line 18: | Line 21: | ||
</pre> |
</pre> |
||
</pre>}} |
</pre>}} |
||
that would display like this: |
|||
<pre style="font-size:1.1em;"> |
|||
<pre> |
|||
The time has come |
The time has come |
||
the walrus said to |
the walrus said to |
||
speak of many things... |
speak of many things... |
||
</pre> |
</pre> |
||
A short experiment will confirm that ''without'' the tags, the lines |
A short experiment will confirm that ''without'' the tags, the lines would all display as one single line of text. |
||
{{hiddenh3|{{tag|Pre|open}} 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 === |
|||
{{hiddenh3|'Pre' Tag Summary:}} |
|||
When a block of text within {{Tag|pre|open}} tags contains its own {{Tag|pre|open}} 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 {{Tag|nowiki}} tags), the tags must be written in their ''literal'' form rather than their usual HTML tag format. |
|||
*'''They are simple to use;''' as such, their shortcomings are easily dismissed. |
|||
*'''The format looks contrived;''' it does not entirely match any page format. |
|||
*'''It uses the whole width of the page;''' even for a word or two. |
|||
*'''Nesting pairs of ''pre'' tags corrupt the layout;''' they need extra care. See below. |
|||
*'''Long lines of text do not wrap;''' this causes difficulty for some code listings. |
|||
*'''The tags can be styled with CSS properties.''' |
|||
*'''Pre-formatted text tags''' cannot be used within lists. |
|||
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” ({{Mono|<}}) and “greater than” ({{Mono|>}}) symbols, with their corresponding [[w:HTML_character_codes|HTML character codes]]: <code>&lt;</code> and <code>&gt;</code>. This technique applies to various tags, and a table below shows some of these conversions. Notice that ''literals'' start with an ampersand symbol ({{Mono|&}}) then add other characters to it; finally a semi-colon is added. See also [[mw:Help:Special characters]]. |
|||
=== Nested Tag Problem === |
|||
When the block of text that is to be displayed within the ''pre'' tags has itself ''pre'' tags in it, then the display will be corrupted. This results since the ''first'' closing tag is taken instead of the last. To get around the problem, and other problems of this type, '''all of the text block's ''pre'' symbols''' must be written in their ''literal'' form instead of their usual HTML tag format. This method can be applied elsewhere, such as for the <nowiki></nowiki> tags when similar problems arise. |
|||
The ''literal'' form is treated as text as opposed to being interpreted as having a function. To make a literal form, the wording within a tag need not be changed; it is only the ''less than'' symbol and the ''greater than'' symbol that need be substituted. Notice that literals start with an ampersand symbol then add other characters to it; finally a semi-colon is added. The entire tag is reconstructed by running all of the parts together into one word. The literals are shown for two sets of tags in the table below. See also [[meta:Help:Special characters]]. |
|||
It may be of interest for some to note that, since a literal typed into an editor window displays on the page as if a conventional tag notation were entered, it follows that in order to display a literal itself on the page, such as in the table below, a still different format is needed. To avoid a struggle in finding codes to explain the matter, interested parties can find the solution, should they ever need it, by accessing the markup for this page. |
|||
Additionally, if you need to display a ''literal'' itself on the page, further formatting is required using {{Tag|nowiki|open}}. For more details, look at the page markup or consult documentation on other wikis. |
|||
{| border=1 align=center cellpadding=5px |
{| border=1 align=center cellpadding=5px |
||
|+ Literals for |
|+ ''Literals'' for selected HTML tags |
||
|- |
|- |
||
! HTML |
! HTML tag format |
||
! Literal |
! ''Literal'' tag format |
||
|- |
|- |
||
| {{Tag|pre|open}} |
|||
| <code>&lt;pre&gt;</code> |
|||
|- |
|- |
||
| {{Tag|pre|close}} |
|||
| <code>&lt;/pre&gt;</code> |
|||
|- |
|- |
||
| {{Tag|nowiki|open}} |
|||
| <code>&lt;nowiki&gt;</code> |
|||
|- |
|- |
||
| {{Tag|nowiki|close}} |
|||
| <code>&lt;/nowiki&gt;</code> |
|||
|} |
|} |
||
{{clear}} |
|||
=== Styling |
=== Styling tags === |
||
The tags can be |
The appearance of tags, such as {{Tag|pre|open}}, can be modified using [[w:CSS_styling|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 {{Tag|pre|open}} layout into a smaller box with colored text: |
||
{{block|ta=left|background=ivory|<pre align=center style="background:transparent; border:none;"> |
{{block|ta=left|background=ivory|<pre align=center style="white-space:pre-wrap;font-size: 1.1em; background:transparent; border:none;"> |
||
<pre style="width:25%; border:1px solid lightgrey; background:ivory; color:blue;"> |
<pre style="white-space:pre-wrap; width:25%; border:1px solid lightgrey; background:ivory; color:blue;"> |
||
The time has come |
The time has come |
||
the walrus said, |
the walrus said, |
||
Line 73: | Line 74: | ||
</pre> |
</pre> |
||
</pre>}} |
</pre>}} |
||
Will display like this: |
|||
<pre align=center style="width:25%; border:1px solid lightgrey; background:ivory; color:blue;"> |
<pre align=center style="white-space:pre-wrap; width:25%; font-size:1.1em;border:1px solid lightgrey; background:ivory; color:blue;"> |
||
The time has come |
The time has come |
||
the walrus said, |
the walrus said, |
||
to speak of many things... |
to speak of many things... |
||
</pre> |
</pre> |
||
To center the box in the page, |
To center the box in the page, use the same wikitext, dropping the <code>whitespace</code> property, within a single table cell, and shift the outer containing table to center. When this method is used, the <code>width</code> 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: |
||
{{block|ta=left|background=ivory|<pre style="background:transparent; border:none;"> |
{{block|ta=left|background=ivory|<pre style="white-space:pre-wrap;font-size: 1.1em; background:transparent; border:none;"> |
||
{| width=25% align=center |
{| width=25% align=center |
||
|<pre style="border:1px solid lightgrey; background:ivory; color:blue;"> |
|<pre style="border:1px solid lightgrey; background:ivory; color:blue;"> |
||
Line 89: | Line 90: | ||
|} |
|} |
||
</pre>}} |
</pre>}} |
||
Will display like this: |
|||
{| width=25% align=center cellspacing=0 cellpadding=0 style="background:transparent;" |
{| width=25% align=center cellspacing=0 cellpadding=0 style="background:transparent;" |
||
|<pre style="border:1px solid lightgrey; background:ivory; color:blue;"> |
|<pre style="border:1px solid lightgrey; font-size:1.1em; background:ivory; color:blue;"> |
||
The time has come |
The time has come |
||
the walrus said, |
the walrus said, |
||
Line 98: | Line 99: | ||
|} |
|} |
||
===Browser |
===Browser pre-wrap test=== |
||
When code lines are to be listed, it often happens that some lines are longer than the page width. Because the text must be displayed just as it was typed, such lines will cause the text to spill out of the box and extent far to the right. The solution to this problem is to employ a conditional form of pre-formatting. By adding the style property ''white-space:pre-wrap;'' to the ''pre'' style expressions above, the long lines will be wrapped automatically while other white space is preserved. |
|||
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 <code>white-space: pre-wrap;</code> to the ''pre'' style expressions above, long lines will automatically wrap while preserving other whitespace. |
|||
At present, the Opera browser can function well with the ''white-space: pre-wrap;''property, and it is included in Firefox, starting with version 3. Internet Explorer 6 does not support this value though Internet Explorer 8 does; the status of IE7 is still unclear. Many other browsers are not yet upgraded for its use, so users of Wiki pages that depend on it might not see the intended display. |
|||
All web browsers, except the outdated [[w:IE11|IE11]], support the <code>white-space: pre-wrap;</code> property.<ref>{{Cite web |title="pre-wrap" {{!}} Can I use... Support tables for HTML5, CSS3, etc |url=https://caniuse.com/?search=pre-wrap |access-date=2024-09-15 |website=caniuse.com}}</ref> |
|||
To check whether your browser supports pre-wrap, look at how it 'printed' the test box below. If your browser handles the <code>white-space: pre-wrap;</code> property correctly, the long line of text (first line following the heading) should wrap within a 400-pixel wide box. |
|||
To test whether or not your browser can handle ''pre-wrap'', consider the box below. The first sentence consists of one long line of text and should be wrapped within a 400 pixel-wide box for a browser that can correctly handle the ''white-space:pre-wrap;'' property. |
|||
{| align=center cellpadding=0 cellspacing=0 style="background:transparent;" |
{| align=center cellpadding=0 cellspacing=0 style="background:transparent;" |
||
|<pre> |
|||
|<pre style="white-space:pre-wrap; width:400px; border:1px solid lightgrey; background:ivory; color:black;"> |
|||
BROWSER PRE-WRAP TEST |
BROWSER PRE-WRAP TEST |
||
--------------------- |
--------------------- |
||
If your browser can handle the pre-wrap feature, then this first sentence of |
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 |
a b c d |
||
Line 124: | Line 127: | ||
</pre> |
</pre> |
||
|} |
|} |
||
</div> |
|||
<div style="background:mistyrose; padding:10px; border: 1px solid lightgrey;"> |
|||
== The |
== The poem tags == |
||
{{Notice|{{clear}} |
|||
'''The 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. In addition, a new line can start with a space. |
|||
*Wikimarkup and HTML tags inside {{tag|poem|open}} tags are still parsed and executed. |
|||
*Single newline/linebreak required to start a new paragraph. |
|||
*{{tag|Poem|open}} does not preserve spacing. |
|||
*Automatic line wrapping without any need to define <code>pre-wrap</code>.}} |
|||
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 unformatted text, and the wikitext apostrophe codes are still honored; three sets for bold, two sets for italics etc. Headings are possible provided that HTML heading codes are used. The tags do not invalidate code in the way of '''nowiki''' tags, and tables will remain active when their code is placed between poem tags. |
|||
{{hiddenh3|'Poem' Tag Summary:}} |
|||
*'''Space is generally not preserved;''' it is parsed like unformatted text. |
|||
*'''Single hard returns make a new line;''' this is needed for prose. |
|||
*'''Leading spaces for lines are permitted;''' not like unformatted text. |
|||
*'''Wikitext apostrophe codes still work within the tags;''' italics, bold, ect. |
|||
*'''HTML tags generally work within poem tags;''' though wiki headings do not. |
|||
*'''Templates and tables are not deactivated;''' without ''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. |
|||
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. <code>======</code>. The tags do not prevent wikitext from being parsed and executed in the way {{Tag|nowiki|open}} tags do, and tables will remain active when their code is placed inside poem tags. |
|||
{{hiddenh3|{{tag|Poem|open}} 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 {{Tag|nowiki|open}} 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: |
To display prose or poetry, or indeed any text that benefits from these formats, simply write the code as in the example below: |
||
{{block|ta=left|background=ivory|<poem><poem> |
{{block|ta=left|background=ivory|ff= monospace,sans-serif|fs=1.1em|<poem style="padding:0.5em 1.5em 0.5em 1.5em;"><poem> |
||
One, two, three, four, five, |
One, two, three, four, five, |
||
Once I caught a fish alive. |
Once I caught a fish alive. |
||
Line 152: | Line 158: | ||
</poem></poem>}} |
</poem></poem>}} |
||
The result is just as expected: |
The result is just as expected: |
||
{{block|ta=left|background=white|ff=inherit|<poem> |
{{block|ta=left|background=white|ff=inherit|<poem style="padding:0.5em 1.5em 0.5em 1.5em;> |
||
One, two, three, four, five, |
One, two, three, four, five, |
||
Once I caught a fish alive. |
Once I caught a fish alive. |
||
Line 160: | Line 166: | ||
Notice that the formats resemble those used for the main page, and that single line breaks have been used. |
Notice that the formats resemble those used for the main page, and that single line breaks have been used. |
||
<h3>Styling the |
<h3>Styling the poem tags</h3> |
||
To style the |
To style the {{tag|poem|open}} 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 <code>width</code> ; 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. |
||
{{block|ta=left|background=ivory|<poem> |
{{block|ta=left|background=ivory|ff=monospace,sans-serif|fs=1.1em|<poem style="padding:0.5em 1.5em 0.5em 1.5em;> |
||
<nowiki>{| cellspacing=0 align=center |
<nowiki>{| cellspacing=0 align=center |
||
|<poem style="padding:15px 15px 15px 15px; background:lightyellow;color:maroon;border:1px solid gray;"> |
|<poem style="padding:15px 15px 15px 15px; background:lightyellow;color:maroon;border:1px solid gray;"> |
||
Line 177: | Line 183: | ||
The result is; |
The result is; |
||
{| cellspacing=0 align=center |
{| cellspacing=0 align=center |
||
| <poem style="padding: |
| <poem style="padding:0.5em 1.5em 0.5em 1.5em;font-size:1em; background:lightyellow;color:maroon;border:1px solid gray;"> |
||
One, two, three, four, five, |
One, two, three, four, five, |
||
Once I caught a fish alive. |
Once I caught a fish alive. |
||
Line 185: | Line 191: | ||
|} |
|} |
||
=== 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 {{tag|nowiki|open}} 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: |
|||
{{block|ta=left|background=ivory| ff=monospace,sans-serif|fs=1.1em|<poem style="padding:0.5em 1.5em 0.5em 1.5em;> |
|||
=== 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: |
|||
{{block|ta=left|background=ivory|<poem> |
|||
<nowiki>{| style="background:rgb(230,230,230);color:black; border:1px solid gray; font-family: fixedsys;" cellpadding=20px cellspacing=0 align=center width=80% |
<nowiki>{| style="background:rgb(230,230,230);color:black; border:1px solid gray; font-family: fixedsys;" cellpadding=20px cellspacing=0 align=center width=80% |
||
| |
| |
||
Line 201: | Line 206: | ||
An example of such a display is just: |
An example of such a display is just: |
||
{| style="background:linen; color:black; border:1px solid gray; font-family:fixedsys;" cellpadding=20px cellspacing=0 align=center width=80% align=center |
{| style="background:linen; color:black; font-size:1.1em; border:1px solid gray; font-family:fixedsys;" cellpadding=20px cellspacing=0 align=center width=80% align=center |
||
|<center>Wikitext Table Code Module</center><poem> |
|<center>Wikitext Table Code Module</center><poem> |
||
<nowiki> |
<nowiki> |
||
Line 226: | Line 231: | ||
</poem> |
</poem> |
||
|} |
|} |
||
{{clear}} |
|||
Notice that the long code lines, notably the table's top line, |
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). |
||
</div> |
|||
<div style="background:floralwhite; padding:10px; border: 1px solid lightgrey;"> |
|||
== The 'Source' Tags == |
|||
The ''source'' 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. |
|||
== The {{Tag|code|open}} and {{Tag|syntaxhighlight|open}} tags == |
|||
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. |
|||
{{Notice|{{clear}} |
|||
*<code>”wikitext"</code> can be used as a programming language parameter ({{var|lang}}) that will highlight common syntaxes in wikitext. |
|||
*Adds color to code according to programming language syntax color plan.}} |
|||
The <code>{{Tag|code|open}}</code> tags are useful when discussing small chunks of source code within a line of normal text. For example, "<code><nowiki>the infamous <code>gets()</code> function</nowiki></code>" is rendered as "the infamous <code>gets()</code> function". |
|||
The <code>{{Tag|syntaxhighlight|open}}</code> tags allow the display of pre-formatted code modules, but in addition they add coloring to the various elements of the code. Like the {{Tag|pre|open}} tags, they preserve white space, that is, they depict the code module exactly as it was typed. |
|||
There are color plans for most languages, and a line is added to the leading tag to indicate what it is. See [http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi '''Code Coloring and Numbering'''] for the full list. Wikitext is not listed as a language for these tags though ''text'' is. Although there is no coloring for the ''text'' selection, the numbering of lines is still possible, and with line numbering comes the wrapping of any long lines. As such. this ''text'' mode can be used for poetry, prose, and script listings. |
|||
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 [[Editing Wikitext/Preformatted Text#HTML Code Colors|examples below]]. |
|||
Numbering is added by writing the word ''line'' 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. |
|||
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, <code>"wikitext"</code> can be used for {{Var|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. <code>start=10</code>, 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. |
|||
{{hiddenh3|'Source' Tag Summary:}} |
|||
*'''The tags add color to enclosed code blocks;''' many language color plans exist. |
|||
*'''Consequetive numbers can be added to lines automatically;''' the first number can be preset. |
|||
*'''Highlighting''' of blocks of consequetive 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. |
|||
*'''Source tags''' cannot be used within ''lists''. |
|||
Programming code that is placed in the <code>{{Tag|syntaxhighlight|open}}</code> 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. |
|||
{{hiddenh3|<syntaxhighlight> tag summary:}} |
|||
=== HTML Code Colors === |
|||
*The tags ''add color'' to enclosed code blocks; many language color plans exist. |
|||
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 ''highlight=<nowiki>"2-3"</nowiki> '', though until more user-control over the highlight coloring is given, the effect must be said to be confusing; The term ''<nowiki>enclose="none"</nowiki>'' serves to remove the otherwise obtrusive dashed blue border which would result. |
|||
*Consecutive numbers can be added to lines automatically; the first number can be preset. |
|||
{{block|ta=left|background=ivory|<poem><nowiki><source lang="html4strict" enclose="none" line start=10 > |
|||
*Highlighting of blocks of consecutive lines is possible. |
|||
HTML module goes here... |
|||
*When line-numbering is used, any long lines of text will wrap; there is no wrapping unless line-numbering is set. |
|||
</source> |
|||
*Plain text exists as an option; so that Wiki or other text can be numbered too. |
|||
</nowiki></poem>}} |
|||
*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... |
|||
</syntaxhighlight> |
|||
</nowiki></poem>}} |
|||
A typical result for a short HTML table coding is: |
A typical result for a short HTML table coding is: |
||
{{block|ta=left|background=#f9f9f9;|ff= |
{{block|ta=left|background=#f9f9f9;|ff= monospace,sans-serif|fs=1.1em|<syntaxhighlight lang="html" line start=10 > |
||
<table align=center style="background: ivory;color:maroon;font-style:italic;font-family:arial;font-weight:bold;font-size:10pt;"> |
<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> |
<caption>This is the top caption</caption> |
||
Line 269: | Line 277: | ||
</tr> |
</tr> |
||
</table> |
</table> |
||
</ |
</syntaxhighlight>}} |
||
=== Numbered |
=== Numbered prose === |
||
The following example shows how to add numbers to poetry, prose or text, and start numbering lines from, for example, 1000. |
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|Editing Wikitext/Indents and Lists § Other Ordered Lists]]. |
||
{{block|ta=left|background=ivory|<poem><nowiki>< |
{{block|ta=left|background=ivory|ff=monospace,sans-serif|fs=1.1em|<poem><nowiki><syntaxhighlight lang="text" enclose="none" line start=1000 > |
||
Poem goes here... (let the software format any long lines). |
Poem goes here... (let the software format any long lines). |
||
</syntaxhighlight> |
|||
</source> |
|||
</nowiki></poem>}} |
</nowiki></poem>}} |
||
A typical result is just: |
A typical result is just: |
||
{{block|ta=left|background=white|ff=inherit|< |
{{block|ta=left|background=white|ff=inherit|fs=1.1em|<syntaxhighlight lang="text" line start=1000 > |
||
One, two, three, four, five, |
One, two, three, four, five, |
||
Once I caught a fish alive. |
Once I caught a fish alive. |
||
Six, seven, eight, nine, ten, |
Six, seven, eight, nine, ten, |
||
Then I put it back again... |
Then I put it back again... |
||
</ |
</syntaxhighlight>}} |
||
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: |
|||
{{block|ta=left|background=ivory|ff=monospace,sans-serif|fs=1.1em|<poem> |
|||
The ''source'' 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: |
|||
{{block|ta=left|background=ivory|<poem> |
|||
<nowiki>{| style="background:ivory;color:black; border:1px solid gray; font-family: Inherit;" cellpadding=20px cellspacing=0 align=center width=40% |
<nowiki>{| 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 > |
| <source lang="text" enclose="none" line start=1 > |
||
Line 302: | Line 308: | ||
</poem>}} |
</poem>}} |
||
The result of running this code in the Wiki editor is: |
The result of running this code in the Wiki editor is: |
||
{| style="background:ivory;color:black; border:1px solid gray; font-family: Inherit;" cellpadding=20px cellspacing=0 align=center width=40% |
{| style="background:ivory;color:black; border:1px solid gray; font-size:1.1em; font-family: Inherit;" cellpadding=20px cellspacing=0 align=center width=40% |
||
| < |
| <syntaxhighlight lang="text" line start=1 > |
||
One, two, three, four, five, |
One, two, three, four, five, |
||
Once I caught a fish alive. |
Once I caught a fish alive. |
||
Six, seven, eight, nine, ten, |
Six, seven, eight, nine, ten, |
||
Then I put it back again... |
Then I put it back again... |
||
</syntaxhighlight> |
|||
</source> |
|||
|} |
|} |
||
{{clear}} |
{{clear}} |
||
Thus, a styled layout for numbered prose ''is'' possible, and formats are easily changed. |
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|Editing Wikitext/Indents and Lists § Other Ordered Lists]]. |
||
Older versions of [https://www.mediawiki.org/wiki/Extension:SyntaxHighlight Extension:SyntaxHighlight] used the tag <code><nowiki><source></nowiki></code>. This is still supported, but <code><nowiki><syntaxhighlight></nowiki></code> may help avoid conflicts if your source code itself contains <code><nowiki><source></nowiki></code> tags (for example XML). |
|||
For those who need additional information on the ''source'' tags and its language codes, go to [http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi '''Code Coloring and Numbering'''] for the full set. |
|||
For a full text on CSS styles, refer to [http://www.w3schools.com/ |
For a full text on CSS styles, refer to [http://www.w3schools.com/cssref/ '''CSS Properties Reference''']. |
||
</div> |
|||
<div style="background:lightyellow;padding:10px; border: 1px solid lightgrey;"> |
|||
==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 |
For those who intend to make use of tables in their work, the main CSS properties and HTML attributes have been summarized. |
||
{{tablestyles}} |
{{tablestyles}} |
||
</div> |
|||
{{ewlinks}} |
{{ewlinks}} |
Latest revision as of 19:50, 15 September 2024
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
[edit | edit source]
|
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
[edit | edit source]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.
HTML tag format | Literal tag format |
---|---|
<pre>
|
<pre>
|
</pre>
|
</pre>
|
<nowiki>
|
<nowiki>
|
</nowiki>
|
</nowiki>
|
Styling tags
[edit | edit source]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
[edit | edit source]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.[1]
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
[edit | edit source]
|
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, |
Poem tags for code
[edit | edit source]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:
|
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
[edit | edit source]
|
The
tags are useful when discussing small chunks of source code within a line of normal text. For example, "<code>
the infamous <code>gets()</code> function
" is rendered as "the infamous gets()
function".
The
tags allow the display of pre-formatted code modules, but in addition they add coloring to the various elements of the code. Like the <syntaxhighlight>
<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
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.
<syntaxhighlight>
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...
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
[edit | edit source]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
[edit | edit source]For those who intend to make use of tables in their work, the main CSS properties and HTML attributes have been summarized.
|
- ↑ ""pre-wrap" | Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2024-09-15.