General editing tips

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 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;
  1. Bullet 1
  2. Bullet 2
    Paragraph under 2.
    Paragraph under 2. This can be media file as well but NOT div, code, note, table etc.
    1. Bullet 2.1
      Paragraph under 2.1
    2. Bullet 2.2
      Paragraph under 2.2
  3. 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