Headings
To make a heading start a line with a "plus (+)". Make as many pluses as the heading level you want to get. See code example below:
+ Level 1 Heading
++ Level 2 Heading
+++ Level 3 Heading
++++ Level 4 Heading
Lists
Unordered Lists
Make a list element by starting a line with an asterisk (*). To increase the indent put extra spaces before the asterisk. See example code;
* Bullet 1
* Bullet 2 _
Paragraph under 2. _
Paragraph under 2. This can be media file as well but NOT [[div]], [[code]], [[note]], table etc.
* Bullet 2.1 _
Paragraph under 2.1
* Bullet 2.2 _
Paragraph under 2.2
* Bullet 3
Example code in action;
- Bullet 1
- Bullet 2
Paragraph under 2.
Paragraph under 2. This can be media file as well but NOT div, code, note, table etc.- Bullet 2.1
Paragraph under 2.1 - Bullet 2.2
Paragraph under 2.2
- Bullet 2.1
- Bullet 3
Ordered Lists
Similarly, you can create numbered lists by starting a paragraph with one or more hashes (#). See code example below:
# Bullet 1
# Bullet 2 _
Paragraph under 2. _
Paragraph under 2. This can be media file as well but NOT [[div]], [[code]], [[note]], table etc.
# Bullet 2.1 _
Paragraph under 2.1
# Bullet 2.2 _
Paragraph under 2.2
# Bullet 3
Example code in action;
- Bullet 1
- Bullet 2
Paragraph under 2.
Paragraph under 2. This can be media file as well but NOT div, code, note, table etc.- Bullet 2.1
Paragraph under 2.1 - Bullet 2.2
Paragraph under 2.2
- Bullet 2.1
- Bullet 3
Links
Internal links
Any link should be marked with 3 nesting square brackets. Example: [[[ link ]]]
If a page address contains disallowed characters the address will be "unixified" to contain only allowed chars. The displayed name however will maintain original form.
At Editor | At Wiki page | Comments |
---|---|---|
[[[link-to-a-page]]] | link-to-a-page | using raw page name |
[[[category: sample page]]] | sample page | linked to a page with category |
[[[some page| custom text]]] | custom text | using custom text |
[[[some page|]]] | some-page | using page title as link text |
[[[doc#toc1|Section 1]]] | Section 1 | linking to an anchor (first section) |
[[[doc#toc1]]] | doc#toc1 | linking to an anchor (first section) |
URLs
At Editor | At Wiki page | Comments |
---|---|---|
[[[http://www.wikidot.com | Wikidot]]] | Wikidot | named link (custom anchor) |
[[[*http://www.wikidot.com | Wikidot]]] | Wikidot | named link (custom anchor), opened in new window/tab |
[[[/category:page/option1/option2 | link text]]] | link text | You can create shorter links to your own site with parameters without writing whole http link. E.g. you can use [[[/blog:post/edit/true | edit this post]]] instead of [[[http://site.wikidot.com/ blog:post/edit/true | edit this post]]] |
http://www.wikidot.com | http://www.wikidot.com | simple inline link |
[http://www.wikidot.com wikidot] | wikidot | named link (custom anchor) |
*http://www.wikidot.com [*http://www.wikidot.com wikidot] |
http://www.wikidot.com wikidot |
opens in a new window |
[# empty link] | empty link | link with href="javascript:;" i.e. not leading anywhere. useful when constructing pull-down menus |
[/category:page/option1/option2 link text] | link text | You can create shorter links to your own site with parameters without writing whole http link. E.g. you can use [/blog:post/edit/true edit this post] instead of [http://site.wikidot.com/ blog:post/edit/true edit this post] |
Anchors
To place an anchor use [[# anchor-name]] syntax. To refer to an anchor (and scroll to it) use [#anchor-name text to display].
Eg: [#toc4 Go to Links]; In action: Go to Links
HTML Blocks
Create HTML blocks by using [[html]] … [[/html]] tags (each on its own line). HTML block is a Code Block inserted in the IFRAME. It makes HTML - scripting much easier.
[[html]] <h1>HTML heading</h1> <p>HTML paragraph</p> <img src="accordant9.png" alt="accordant"/> [[/html]]
Tables
Simple tables
You can create simple tables using pairs of vertical bars (||) :
||~ head 1 ||~ head 2 ||~ head 3 ||
|| cell 1 || cell 2 || cell 3 ||
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 ||
|||||| looong cell 8||
Example code in action:
head 1 | head 2 | head 3 |
---|---|---|
cell 1 | cell 2 | cell 3 |
long cell 4 | cell 5 | |
cell 6 | long cell 7 | |
looong cell 8 |
Custom div blocks
To improve the layout you can use [[div]] ... [[/div]] elements which transform to html <div> … </div> blocks.
Allowed attributes are: class and style only but this should be more than enough to create desired layout.
[[div]] blocks can be nested. Put the [[div]] and [[/div]] tags on their own (separate) lines or the parser will NOT recognize them.
Below is an example how to create a 2-column layout using div block:
[[div style="float:left; width: 45%; padding: 0 2%"]]
left column left column left column left column left column
left column left column left column left column left column
[[/div]]
[[div style="float:left; width: 45%; padding: 0 2%"]]
right column right column right column right column right column
right column right column right column right column right column
[[/div]]
~~~~
left column left column left column left column left column
left column left column left column left column left column
right column right column right column right column right column
right column right column right column right column right column
The ~~~~ element is used to clear floats and translates more or less to <div style="clear:both"></div>). Alternatively, you can also use the class, "cadm_clear" for the same. I.e. instead of ~~~~, you can provide a div with the class, "cadm_clear";
Eg: [[div class="cadm_clear]]
[[/div]] or wrap the succeeding section inside the cadm_clear div.
Custom [[div]] blocks can be used to create very advanced page layouts. It is recommended that you avoid in-line styling and create a class and in turn, use it.
Embedding media
Videos
To embed video directly into the page use [[embedvideo]] ... [[/embedvideo]] block.
Between the the "embedding html code" should be placed from any of the following video online galleries:
E.g.
[[embedvideo]]
<embed style="width:400px; height:326px;" id="VideoPlayback" align="middle"
type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?docId=263244138622602613"
allowScriptAccess="sameDomain" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL"
FlashVars="playerMode=embedded"> </embed>
[[/embedvideo]]
Audio
Similarly, to embed audio use [[embedaudio]] ... [[/embedaudio]] and the html embedding code found on the audio hosting website.
Currently supported are:
The iframe element
Using the iframe element one can embed content of any other web page. The syntax is:
[[iframe //url-source attributes//]]
It translates into HTML tags <iframe src="url-source" attributes></iframe>. The allowed attributes are:
- frameborder (0 or 1 allowed)
- align (left, right, top, bottom, middle)
- height (number of pixels or %)
- width (number of pixels or %)
- scrolling (yes or no)
- class
- style