Jump to content

User:Webrobate/Wiki markup language

From Wikipedia, the free encyclopedia

What does wikimarkup actually do? It instructs an engine to generate a document encoded in HTML. But which wikimarkup code generates which bit of HTML code? In other words, how does wikimarkup map onto HTML?

Experiments[edit]

Paragraphs[edit]

WML: One or more contiguous lines of text (separated by a single line-break) that do not begin with a colon, semicolon, blank, (etc?).

HTML: The line-breaks replaced by blanks, the whole text enclosed in a "p" tag.

Display: A paragraph - a single line of text which wraps.

Note: A trailing blank on a line of text is dropped in the HTML.

Note: A double-line-break may split the text into separate adjacent "p" tags.

Wiki markup code HTML code generated What it looks like
(text 1)
(text 2)

(text 3)
<p>(text 1) (text 2)</p>
<p>(text 3)</p>

(text 1) (text 2)

(text 3)

Italic[edit]

Experiment:

Wiki markup code HTML code generated What it looks like
(text 1) ''(text 2)''

''(text 3)'' (text 4)

''(text 5)''
''(text 6)''

''(text 7)
(text 8)''
<p>(text 1) <i>(text 2)</i></p>
<p><i>(text 3)</i> (text 4)</p>
<p><i>(text 5)</i> <i>(text 6)</i></p>
<p><i>(text 7)</i> (text 8)</p>

(text 1) (text 2)

(text 3) (text 4)

(text 5) (text 6)

(text 7) (text 8)

Conclusions:

A double-apostrophe wiki-markup opens a new "i" tag, or closes an already opened "i" tag, in the generated HTML.

An end-line wiki-markup closes an open "i" tag in the generated HTML.

Bold[edit]

'''bold text'''

<p><b>bold text</b></p>

bold text

Indent[edit]

:indented text

<dl><dd>indented text</dd></dl>

text text text

Dot point[edit]

* dot point text

<ul><li>dot point text</li></ul>

  • dot point text

More[edit]

Wiki markup code HTML code generated What it looks like
Unordered lists
* one star
** two stars
*** three stars
**: two stars plus colon
** two stars
* one star
no star
* one star
<p>Unordered lists</p>
<ul>
<li>one star
<ul>
<li>two stars
<ul>
<li>three stars</li>
</ul>
<dl>
<dd>two stars plus colon</dd>
</dl>
</li>
<li>two stars</li>
</ul>
</li>
<li>one star</li>
</ul>
<p>no star</p>
<ul>
<li>one star</li>
</ul>

Unordered lists

  • one star
    • two stars
      • three stars
      two stars plus colon
    • two stars
  • one star

no star

  • one star
Numbered lists
# one hash
# one hash
## two hashes
## two hashes
### three hashes
##: two hashes plus colon
### three hashes
no hashes
# one hash
<p>Numbered lists</p>
<ol>
<li>one hash</li>
<li>one hash
<ol>
<li>two hashes</li>
<li>two hashes
<ol>
<li>three hashes</li>
</ol>
<dl>
<dd>two hashes plus colon</dd>
</dl>
<ol>
<li>three hashes</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>no hashes</p>
<ol>
<li>one hash</li>
</ol>

Numbered lists

  1. one hash
  2. one hash
    1. two hashes
    2. two hashes
      1. three hashes
      two hashes plus colon
      1. three hashes

no hashes

  1. one hash
Indents
:colon
 :colon
: colon


::colon 
:::colon
plain text: with colon
:colon :colon

<p>Indents</p> <dl> <dd>colon</dd> </dl> <pre> :colon </pre> <dl> <dd>colon</dd> </dl> <p><br /></p> <dl> <dd> <dl> <dd>colon <dl> <dd>colon</dd> </dl> </dd> </dl> </dd> </dl> <p>plain text: with colon</p> <dl> <dd>colon :colon</dd> </dl>

Indents

colon
:colon
colon


colon
colon

plain text: with colon

colon :colon
;semicolon 
 ;semicolon
;semicolon

; semicolon : colon : colon
: colon
: colon
; semicolon ; semicolon : colon
: colon
:colon
html goes here
semicolon
;semicolon
semicolon
semicolon
colon : colon
colon
colon
semicolon ; semicolon
colon
colon
colon

Tables[edit]

Wiki markup code HTML code generated What it looks like
{| class="wikitable"
! style="width: 33%" | column one header
! style="width: 33%" | column two header
! style="width: 33%" | column three header
|-
| 
row one, column one
|
row one, column two
|
row one, column three
|-
|
row two, column one
|
row two, column two
|
row two, column three
|}
<table class="wikitable">
<tr>
<th style="width: 33%">column one header</th>
<th style="width: 33%">column two header</th>
<th style="width: 33%">column three header</th>
</tr>
<tr>
<td>
<p>row one, column one</p>
</td>
<td>
<p>row one, column two</p>
</td>
<td>
<p>row one, column three</p>
</td>
</tr>
<tr>
<td>
<p>row two, column one</p>
</td>
<td>
<p>row two, column two</p>
</td>
<td>
<p>row two, column three</p>
</td>
</tr>
</table>
column one header column two header column three header

row one, column one

row one, column two

row one, column three

row two, column one

row two, column two

row two, column three