tag. The second example uses , which should be familiar if you know HTML. Figure 4-10 shows an example of how these are displayed. In the final example, a space has been inserted at the front of each line. The following code shows the HTML that is rendered:
Pre-formatted text
Example 1: <nowiki>
# First item ## This item should be indented # The final item
Example 2: <pre>
# First item ## This item should be indented
93
Chapter 4: Writing and Editing Content
# The final item
Example 3: Preceding space
# First item ## This item should be indented # The final item
Figure 4-10: and links displayed by MediaWiki
Lists
There are three kinds of lists: ordered lists, unordered lists (bulleted lists), and definition lists. An ordered list uses numbers of different formats to identify each list item, whereas an unordered list uses bullets. The actual numeric format and bullet are ultimately decided by stylesheets. Definition lists are lists of terms, along with their definitions, such as a glossary.
94
Chapter 4: Writing and Editing Content
As you might guess, there is both a wikitext method of creating lists and an HTML method. The following code shows examples of both methods:
==Wikitext ordered list== # first list item # second list item ==HTML ordered list== - first list item
- second list item
==Wikitext unordered list== * first list item * second list item ==HTML unordered list==
- first list item
- second list item
definition lists: ;Glossary ;Wikitext : Markup used for MediaWiki ;HTML: Hypertext Markup Language - Glossary
- Wikitext
- Markup used for MediaWiki
- HTML
- Hypertext Markup Language
One important difference between the wikitext method and the HTML method is that the wikitext method limits list items to a single paragraph. This is due to a limitation in the parser. If your list items need to be more than one paragraph, then you should use the HTML method. You may have noticed that the HTML used in the last example for the definition list does not use closing tags — that is, there is no < /dt> or . That’s because, for some reason, the parser does not interpret them properly and they end up being displayed on the page. When they are removed, the parser converts the text to proper HTML and it is formatted appropriately when displayed. This kind of shorthand is based on SGML-based HTML which allows tags to not be closed. In most cases, this chapter doesn’t focus on that syntax because it is nonstandard XHTML and there is simply not enough space to address every possible variation (the MediaWiki parser is actually quite accommodating). In this case, the example used here was chosen because the XHTML method does not work.
95
Chapter 4: Writing and Editing Content
Figure 4-11 illustrates three lists displayed as HTML.
Figure 4-11: An ordered list, an unordered list, and a definition list in MediaWiki
Nested Lists
So far, the examples have been simple, but you can do more complicated, interesting things with your lists. For example, you can create nested lists. The following example shows you how to make a nested, ordered list:
==Nested lists== # first list item ## first sub item ## second sub item # second list item - first list item
- first sub item
- second sub item
- second list item
96
Chapter 4: Writing and Editing Content
Mixed Nested Lists
In the previous example, one ordered list was nested inside another ordered list. You might be tempted to use the following wikitext to nest an unordered list inside an ordered list:
==Bad mixed nested list== # first list item ** first sub item ** second sub item # second list item ==Good mixed nested list== # first list item #* first sub item #**first sub sub item #* second sub item # second list item ## first numbered sub item ==Another good mixed nested list== # first list item #* first sub item #*#first sub sub item #* second sub item # second list item ## first numbered sub item
In the preceding examples, the first list attempts to nest an unordered list inside an ordered list. If you do this, however, you will get the following output, which is likely not what you expect:
- first list item
-
- first sub item
- second sub item
- second list item
Instead of finding an unordered list nested inside an ordered list, you find an ordered list followed by an unordered list, followed by yet another ordered list. Figure 4-12 illustrates how this list will be displayed by MediaWiki. The two examples that follow the first example show the proper way to do nesting. You were shown the wrong way to do it first because the wrong way seems to be the intuitive way (to me, at least), and the correct way isn’t that intuitive.
97
Chapter 4: Writing and Editing Content
Figure 4-12: Three lists in sequence, rather than nested as expected Figure 4-13 shows both examples of acceptable nested lists.
Figure 4-13: Proper nested lists in MediaWiki
98
Chapter 4: Writing and Editing Content
Tables
Tables are difficult to implement under any circumstances. Wikitext provides a non-WYSIWYG way to create tables, but it is less than ideal. As a matter of fact, it allows you to use three different approaches to creating tables. Because the first approach is simply to code it in XHTML, I focus my examples on the other two approaches: simplified HTML and a piped table. Either way, each system requires a thorough understanding of how to create tables in HTML. The piped table merely substitutes | characters for certain HTML constructs, so if you don’t understand what’s being replaced, you may find it confusing.
Basic Tables
The following wikitext examples show three different ways of making a basic table in MediaWiki. Tables are divided into rows and columns, and the intersection of a row and a column is a cell. The first table is created using familiar HTML syntax:
| Row 1, Heading 1 | Row 1, Heading 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
This is the wikitext version of the same table:
{| ! Row ! Row || Row | Row |} 1, Heading 1 1, Heading 2 2, Cell 1 2, Cell 2
The following example shows an alternative equivalent. Instead of each cell being written on its own line, the following example shows the cells of each row displayed on the same line. In order to separate cells using table headers, the line must start with an exclamation mark (!), and each cell must be separated by two exclamation marks (!!). Likewise, table data rows start with a pipe (|), and each cell in the row is separated by two pipes ( ):
{| ! Row 1, Heading 1!! Row 1, Heading 2 || Row 2, Cell 1 || Row 2, Cell 2 |}
All three of the preceding table examples are rendered the same way in MediaWiki, as shown in Figure 4-14.
99
Chapter 4: Writing and Editing Content
Figure 4-14: Basic tables in MediaWiki
Table Attributes
If you enter the table example into the edit field of MediaWiki, it will be published as is, with no changes to the code you entered. If you do this, you’ll see that the table is formed, but difficult to read. In order to fix that, you need to modify some attributes of the table. When testing or writing a new table, one of the best things to do is display the borders of the cells. The space between the cells is defined by the cellpadding and cellspacing attributes. Padding refers to the space between the text within the cell and the edge of the cell, while spacing refers to the space between the cells. The following two examples display the same table from the previous example, but with a border that is 1-pixel wide, and with cell padding of 2 pixels and cell spacing of 6 pixels. Figure 4-15 shows a simple table with various attributes added. In addition to the border, a caption is added as well:
===Simple table (with attributes) example 1=== This is my caption | Row 1, Heading 1 | Row 1, Heading 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
===Simple table (with attributes) example 2===
100
Chapter 4: Writing and Editing Content
{| border="1" cellpadding="2" cellspacing="6" |+ This is my caption ! Row 1, Heading 1 ! Row 1, Heading 2 || Row 2, Cell 1 | Row 2, Cell 2 |}
Figure 4-15: Tables with attributes in MediaWiki Attributes can be used on rows and cells, too. The following example builds on the previous one by adding color to two of the rows of the table, and by adding a wikilink in the first cell of row 4:
===Simple table (with attributes) example 3=== {| border="1" cellpadding="2" cellspacing="0" |+ ""'This is my caption""' |- bgcolor="gray"
101
Chapter 4: Writing and Editing Content
! Row 1, Heading 1 ! Row 1, Heading 2 || Row 2, Cell 1 | Row 2, Cell 2 |- bgcolor="#cccccc" | Row 3, "'Cell 1"' | Row 3, Cell 2 | | Row 4, [[Cell 1]] | Row 4, Cell 2 |}
Colspan and Rowspan
You can also combine cells, across rows or columns. The following examples show both the HTML and the wikitext method of joining cells:
===Colspan and rowspan example 1=== ====HTML colspan==== | Row 1, Heading 1 |
| Row 2, Cell 1 | Row 2, Cell 2 |
---====Wikitext colspan==== {| border="1" |+ This is my ! colspan="2" || Row 2, Cell | Row 2, Cell |}
caption |Row 1, Heading 1 1 2
===Colspan and rowspan example 2===
====HTML rowspan====
102
Chapter 4: Writing and Editing Content
| Row 1, Heading 1 | Row 1, Heading 2 |
| Row 2, Cell 2 |
---====Wikitext rowspan====
{| border="1" |+ This is my caption ! rowspan="2"| Row 1, Heading 1 ! Row 1, Heading 1 || Row 2, Cell 2 |}
Figure 4-16 shows how the different colspan and rowspan options are displayed.
Figure 4-16: Tables with colspan and rowspan in MediaWiki
103
Chapter 4: Writing and Editing Content
Combining Tables and Lists
A more complicated construct occurs when combining tables and lists. The following wikitext is an example of embedding a list inside a cell of a table:
===Tables and lists example=== {|border=1 cellpadding=0 cellspacing=0 |+ Resume |- valign="top" ! Experience | # NASA # CIA |- valign="top" ! Goals | # Get a job # Lose weight |}
The following code shows the HTML that is output. Two lists are used in the table: The first list is used to display a list of organizations for which the applicant has worked in the past, and the second list is a record of personal goals for the applicant. The first list is not displayed as expected because an extra space has been inserted before the # NASA phrase, which MediaWiki assumes should be converted into a tag. It is then followed by an ordered list with one item, CIA. The list of goals is displayed properly.
Tables and lists example
Resume | Experience | # NASA
104
Chapter 4: Writing and Editing Content
- CIA
|
| Goals | - Get a job
- Lose weight
|
The output of this HTML is shown in Figure 4-17.
Figure 4-17: Table with embedded list output
HTML on Wiki Pages
Despite the convenience of wikitext, many users prefer to use HTML, and MediaWiki obliges that wish by providing several options for placing HTML on the page. However, it does so with its own idiosyncrasies.
Character and Entity References
MediaWiki deviates from the XML standard in handling numeric character references and character entity references. The goal is to avoid collisions with special characters used in XML markup.
105
Chapter 4: Writing and Editing Content
For example, if you were to refer to a < character in the text of a document, an XML parser would mistake that for the beginning of an XML tag. In order to avoid that, you use a reference instead. When you enter < in your text, it is rendered by the browser as a < character. XML defines the character entity references shown in the following table, along with the character that is displayed in the browser.
Entity References
& < > " '
Displayed Character
& < > " '
MediaWiki supports all of these entities except '. All of the others work just like they do in XML, but any use of ' in text will be converted to ', which is displayed as ‘‘'’’. In other words, it is displayed in the browser just as it’s written in wikitext. In addition to the XML character entity references, HTML defines a total of 252 character entity references. These are defined in the global variable $wgHtmlEntities by Sanitizer.php. Whenever you want the characters defined in this list to display in the browser, you need to use the entity references. One possible source of confusion is that you can enter the characters directly into the edit field: ˆ øπ ’’’æ. . .¬◦
· ©f
When you select Preview, the characters will be displayed as is, without being converted. However, when you are ready to save the changes to the page, a blank page is returned — the raw UTF-8 characters are neither converted to entities nor displayed in the browser. The reason for this has to do with how different languages are handled by MediaWiki, a topic reviewed later in the book.
Sanitizing
MediaWiki allows you to use a wide range of HTML instead of wikitext. All such HTML is run through the Sanitizer.php script, which ensures that the HTML is well formed, and converts HTML 4.x tags to XHTML tags (performing tasks such as changing
to < br/> and making the element names lowercase). It also encodes values in attributes that would confuse the MediaWiki parser. Any characters with special meaning to the parser are converted into entities, as shown in the following snippet of code pulled from Sanitizer.php:
'<' '>' "" '{' '[' """ => '<', // This should never happen, => '>', // we’ve received invalid input => '"', // which should have been escaped. => '{', => '[', => '''',
106
Chapter 4: Writing and Editing Content
'ISBN' 'RFC' 'PMID' '|' '__' => => => => => 'ISBN', 'RFC', 'PMID', '|', '__',
It also cleans up any CSS included in style attributes, removing JavaScript expressions (from Internet Explorer 5.0+ ) and all URLs. If you choose not to have this level of security (and concomitant restrictions), you can opt to allow unrestricted HTML to be entered by users (a risky proposition), by setting the global variable $wgRawHtml to true. Likewise, you can disable HTML altogether, by setting the global variable $wgUserHtml to false. The following example shows wikitext handling of entities. The result of this wikitext will be a table that displays the entity markup in the first column, and the entity output in the second column. In order to do this, the entities in the first column are escaped:
Tables and Entities
{|border="1" width="80%" cellpadding="4px" cellspacing="0px" |+ This table illustrates the use of entities in wikitext |- bgcolor="gray" ! Entity !! Character |-align="center" |&|| & ||&|| & ||>|| > ||>|| > ||<|| < ||<|| < ||©|| © ||"|| " ||"|| " ||"|| " |}
The wikitext is converted to the following HTML. Pay special attention to how the entities are converted:
107
Chapter 4: Writing and Editing Content
Tables and Entities
This table illustrates the use of entities in wikitext | Entity | Character |
| & | & |
| & | & |
| > | > |
| > | > |
| < | < |
| < | < |
| © | © |
| " | " |
| " | " |
| " | " |
108
Chapter 4: Writing and Editing Content
Figure 4-18 shows how MediaWiki displays a complex table of entities.
Figure 4-18: A complex table with entities displayed by MediaWiki
Ruby text, for East Asian languages
The final group of HTML elements usable in MediaWiki are those used for rubies, a typographical technique used in Japanese writing: