02/05/2011 Wiki Syntax - Wikidot - Free and Pro …

jcsjesus | My account ▼

Features Opinions Pricing Advertise Sandbox Search this site

Documentation Wiki Syntax

Wikidot Documentation & Help pages » Wiki Syntax
Wiki syntax
Quick reference
Modules history
Data forms
Embedding services This document describes the Wiki Syntax used within the Wikidot.com project.
Templates
Searching Any page of any of the sites exists in two different forms: the source code and the compiled
Site structure code. Source code is what you can edit and what describes the content of the page. Source
Browser requirements code is compiled into the (XHTML) code that is sent to the browser when you view/browse
Managing users the page. The Wiki Syntax is used to create content of the pages by editing the source code.
Layout reference
If you are looking for wiki code snippets ready to copy/paste/modify, please visit our Code
Video tutorials
Snippets Site.

Community sites
Documents you might also be interested in:
Wikidot Community Code embedding — list of supported embeds, i.e. pieces of code from other
Wikidot Handbook websites you can use on Wikidot, like films from YouTube or Google Gadgets.
Code snippets Modules — description of modules — interactive elements you can put on your
pages.
FAQ
User Accounts Fold
Upgrades and Plans Table of Contents
Site Features/Managing
Private Sites Inline Formatting
Editing Pages Text Size
Technical Relative text sizes
Watching Absolute text sizes
Paragraphs and newlines
view source Typography
print Literal Text
Universal Escaping
Live example
Comments
Headings
Table of Contents
Horizontal Rules
Lists
Bulleted Lists
Numbered Lists
Definition Lists
Block Quotes
Collapsible blocks
Links
Internal links
URLs
Anchors
Emails
InterWiki
Images
Single images
Gallery of images
Notes
HTML Blocks
Code Blocks
Tables
Simple tables
Advanced (custom) tables
Block formatting elements
Left, right, centered and justified
Custom div blocks
Math
Equations
Inline math
Footnotes
Bibliography
Date: How Long Ago?
How it Works
Code Wizard
Examples
www.wikidot.com/doc:wiki-syntax#toc20 1/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
Examples
Limitations
Additional Note
Include other pages
Embedding media
Video
Audio
Embedding code from other sites
[[embed]] tag
[[iframe]] element
Iftags
Modules
Attached files
Users
Social bookmarking
Standalone buttons for page options
Button for tag update
Layout elements
Tab view

Inline Formatting
what you type what you get
//italic text// italic text
**bold text** bold text
//**italic and bold**// italic and bold
__underline text__ underline text
--strikethrough text-- strikethrough text
{{teletype (monospaced) text}} teletype (monospaced) text

normal^^superscript^^ normalsuperscript
normal,,subscript,, normalsubscript
[!-- invisible comment --]
[[span style="color:red"]]custom //span//
element[[/span]] custom span element

##blue|predefined## or ##44FF88|custom-code## color predefined or custom-code

color

Text Size
Text (font) size can be set with the [[size …]] … [[/size]] tags. These tags can be nested.

Relative text sizes

Relative text sizes are based on the current font — they increase or decrease the current font
size. To specify a relative text size use [[size smaller]], [[size larger]], [[size nem]], or
[[size n%]], where n is a 1- to 5-digit number (including an optional decimal point).

what you type what you get

[[size smaller]]smaller text[[/size]] smaller text

[[size larger]]larger text[[/size]] larger text

[[size 80%]]80% of current size[[/size]] 80% of current size

[[size 100%]]100% of current size[[/size]] 100% of current size

[[size 150%]]150% of current size[[/size]] 150% of current size
[[size 0.8em]]80% of current size[[/size]] 80% of current size

[[size 1em]]100% of current size[[/size]] 100% of current size

[[size 1.5em]]150% of current size[[/size]] 150% of current size

Absolute text sizes

Absolute text sizes are not based on the current font size. To specify an absolute text size
use [[size xx-small]], [[size x-small]], [[size small]], [[size large]], [[size x-large]],
[[size xx-large]], or [[size npx]], where n is a 1- to 5-digit number (including an optional
decimal point).

what you type what you get

www.wikidot.com/doc:wiki-syntax#toc20 2/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
what you type what you get
[[size xx-small]]xx-small text[[/size]] xx-small text

[[size x-small]]x-small text[[/size]] x-small text

[[size small]]small text[[/size]] small text

[[size large]]large text[[/size]] large text
[[size x-large]]x-large text[[/size]]
x-large text
[[size xx-large]]xx-large text[[/size]]
xx-large text
[[size 7px]]text size 7 pixels[[/size]] text size 7 pixels

[[size 18.75px]]text size 18.75 pixels[[/size]] text size 18.75 pixels

Paragraphs and newlines

Paragraphs are separated by two new lines. One new line produces a… new line.

First paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second paragraph. Aenean a libero. Vestibulum adipiscing, felis ac faucibus i

Just a new line.
Another new line.

First paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Second paragraph. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat
lacus accumsan neque, vitae nonummy lorem pede ac elit.
Just a new line.
Another new line.

Typography
If you do care about typography there are a few ways to improve it in your text:

you type you get

``quotation'' “quotation”
`quotation' ‘quotation’
,,quotation'' „quotation”
<<quotation>> «quotation»
>>quotation<< »quotation«
dots... dots…
em -- dash em — dash

Note: em dash works only when surrounded by spaces.

Literal Text
If you want to escape parsing and produce raw text enclose it in double @@ characters.

This //text// gets **parsed**.

@@This //text// does not get **parsed**.@@

This text gets parsed.

This //text// does not get **parsed**.

Universal Escaping
If you want to put arbitrary characters or HTML entities (including Unicode entities) into your
text, use @< … >@. Inside this sequence, convert each "&" to "&amp;", each "<" to "&lt;"
and each ">" to "&gt;".

The escape sequence will decode HTML entities like &lt; including:

www.wikidot.com/doc:wiki-syntax#toc20 3/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
entities such as &copy; (©)
numeric entities like &#252; (ü)
Unicode entities like &#8212; (—) or &auml; (ä)

Live example

HTML entities: @<U umlaut: &#252;>@

@<[[code]]>@
@<Hello world @@ !!!!>@
@<Something **not** bold>@
@<[[module ListPages]]>@
@<Copyright sign: &copy;>@
@<[[/code]]>@
Or, @<@&lt;>@ and @<&gt;@>@

Which gives:

HTML entities: U umlaut: ü

[[code]]
Hello world @@ !!!!
Something **not** bold
[[module ListPages]]
Copyright sign: ©
[[/code]]
Or, @< and >@

Comments
A comment is a source block that is not rendered in the compiled version. To add a comment
to the source use [!-- ... --] construct, e.g.:

[!--
This text will not be rendered.
--]

Headings
To make a heading start a line with a "plus". Make as many pluses as the heading level you
want to get.

+ Level 1 Heading
++ Level 2 Heading
+++ Level 3 Heading
++++ Level 4 Heading
+++++ Level 5 Heading
++++++ Level 6 Heading

Table of Contents
To create a list of every heading, with a link to that heading, put a table of contents tag on its
own line.

[[toc]]
[[f>toc]] - right-float table of contents
[[f<toc]] - left-float table of contents

Note that the table of contents creates a bookmark called "#toc".

If you want a particular heading NOT to appear in the table of contents, append the pluses
with an asterisk, like this:

+ This section appears in the TOC

+* And this one does not
++* Neither does this one

Horizontal Rules
Use four dashes or more (----) to create a horizontal rule.

www.wikidot.com/doc:wiki-syntax#toc20 4/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
Lists
Bulleted Lists
Make a list element by starting a line with an asterisk. To increase the indent put extra spaces
before the asterisk.

* Bullet 1
* Bullet 2
* Bullet 2.1

Bullet 1
Bullet 2
Bullet 2.1

If you need to put more than one line in the bullet list, please use _ (underscore) at the end of
the line you want to break (after one space). Remember not to insert any character after the
underscore.

* Bullet 1 _
another line
* Bullet 2
* Bullet 2.1

Bullet 1
another line
Bullet 2
Bullet 2.1

Numbered Lists
Similarly, you can create numbered lists by starting a paragraph with one or more hashes.

# Item 1
# Item 2
# Item 2.1

1. Item 1
2. Item 2
1. Item 2.1

If you need to put more than one line in the numbered list, please use _ (underscore) at the
end of the line you want to break (after one space). Remember not to insert any character
after the underscore.

# Item 1 _
another line
# Item 2
# Item 2.1

1. Item 1
another line
2. Item 2
1. Item 2.1

You can mix bulleted lists and number lists.

Definition Lists
You can create a definition (description) list with the following syntax:

: Item 1 : Something
: Item 2 : Something else

Item 1
Something
Item 2
Something else

If you need to put more than one line in the definition list, please use _ (underscore) at the
end of the line you want to break (after one space). Remember not to insert any character
after the underscore.
www.wikidot.com/doc:wiki-syntax#toc20 5/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
: Item 1 : Something _
another line
: Item 2 : Something else

Item 1
Something
another line
Item 2
Something else

Block Quotes
You can mark a blockquote by starting a line with one or more '>' characters, followed by a
space and the text to be quoted.

This is normal text here.

> Indent me! The quick brown fox jumps over the lazy dog. \
Now this the time for all good men to come to the aid of \
their country. Notice how we can continue the block-quote \
in the same "paragraph" by using a backslash at the end of \
the line.
>
> Another block, leading to...
>> Second level of indenting. This second is indented even \
more than the previous one.

Back to normal text.

This is normal text here.

Indent me! The quick brown fox jumps over the lazy dog. Now this the time for
all good men to come to the aid of their country. Notice how we can continue
the block-quote in the same "paragraph" by using a backslash at the end of the
line.
Another block, leading to…

Second level of indenting. This second is indented even more

than the previous one.

Back to normal text.

Collapsible blocks
+ explain collapsible blocks

Links
Internal links
Unlike some other wiki engines Wikidot.com does not process SquashedAndCapitalized words
as page links. Instead any link should be marked with 3 nesting square brackets.

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.

what you type what you get comments

[[[link-to-a-page]]] link-to-a-page using raw page name

[[[link "TO" ą pagE]]] link "TO" ą automatic purification of destination

pagE page
[[[category: sample page]]] sample page linked to a page with category
[[[some page| custom
text]]] custom text using custom text

[[[doc|Documentation]]] linking to an existing page (different

Documentation
color)
[[[some page|]]] some-page using page title as link text
[[[doc#toc1|Section 1]]] Section 1 linking to an anchor (first section)
[[[doc#toc1]]]
www.wikidot.com/doc:wiki-syntax#toc20 6/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
doc linking to an anchor (first section)
URLs

what you type what you get comments

[[[http://www.wikidot.com |
Wikidot]]] Wikidot named link (custom anchor)

[[[*http://www.wikidot.com | named link (custom anchor),

Wikidot]]] Wikidot
opened in new window/tab
You can create shorter links
to your own site with
parameters without writing
whole http link.
[[[/category:page/option1/option2 E.g. you can use
link text [[[/blog:post/edit/true |
| link text]]]
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]
*http://www.wikidot.com
[*http://www.wikidot.com wikidot]
[# empty link]
[/category:page/option1/option2
link text]
wikidot named link (custom anchor)
http://www.wikidot.com
opens in a new window
wikidot
link with
href="javascript:;" i.e. not
empty link leading anywhere. useful
when constructing pull-down
menus
You can create shorter links
to your own site with
parameters without writing
whole http link.
E.g. you can use
link text [/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].

Emails

what you type what you get comments

support@example.com support@example.com simple inline email
[support@example.com email me!] email me! custom anchor

Although we discourage anyone from putting his/her email address on the web, WikiDot
engine provides a simple scrambling mechanism to prevent automated bots from reading
emails. Each email is scrambled and it is decoded in the client's browser. So it is not 100%
spam-safe, but much safer than plain-text emails.

InterWiki
To link directly to a Wikipedia article you can use a syntax:

what you type what you get

[wikipedia:Albert_Einstein] Albert_Einstein
[wikipedia:Albert_Einstein Albert] Albert
[wikipedia:it:Albert_Einstein Albert] Albert

Other links defined by example:

[google:free+wiki] - search google for the "free wiki" term
[dictionary:wiki] - look up definitions of the word wiki from dictionary.reference.com

www.wikidot.com/doc:wiki-syntax#toc20 7/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
Images
Single images
To insert an image into the page use the following syntax:

[[image image-source attribute1="value1" attribute2="value2" ...]]

And here is the list of allowed attributes:

attribute
allowed values example value description
name
makes image a link to another
page or web address; this is
wiki page name "wiki-page" ignored when using Flickr as a
link "http://www.example.com"
or URL source; prepend the link with
'*' to make it open in a new
window
Text substitution when image
"a photo of me" not available. It is also used by
alt any string
screen readers to describe an
image.

"a photo of me" Displays mouse-over text for

title any string
the image.

"200px" forces width of a image when

width number of pixels
displaying

"200px" forces height of a image when

height number of pixels
displaying
valid CSS style "border: 1px solid red; adds extra CSS style to the
style padding: 2em;"
definition image
forces the image CSS class -
class CSS class "mystyle" suggested use only with
customized themes
"square" -
75x75 pixels
"thumbnail" -
100 on longest
side displays a resized image; great
"small" - 240
for thumbnails
on longest side (transparency is lost and
"medium" - 500 clicking the thumbnail opens
on longest side the original image, unless link
size "medium640" - any of allowed ;-) parameter is also supplied)
640 on longest if flickr is the source it pulls
side (Flickr only) required size from a Flickr
"large" - 1024 server;
on longest side this option has effect only on
(only for Flickr local images or Flickr images
large images)
"original" -
original image
(Flickr only)

size attribute works very well with local files (attached to pages) not only with image files, but
with e.g. PDF or PostScript. See this page for more details.

The image-source can be one of the following:

source
format example value description
type
displays image
URL http://www.example.com/image.jpg
any valid URL address from the web
address
address
file displays image
attachment filename exampleimage.jpg attached to
(current the current
page) page
displays first
image
attached to

www.wikidot.com/doc:wiki-syntax#toc20 8/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
:first :first :first the current
page (or
nothing at all)
file
/another-page- displays image
attachment /another-page/exampleimage.jpg
name/filename attached to a
(different
different page
page)
displays image
from Flickr
flickr image flickr:photoid flickr:83001279 and links to
the original
Flickr page
displays image
from Flickr
and links to
the original
Flickr page; if
flickr image flickr:photoid_secret flickr:149666562_debab08866 the secret is
(private) provided the
image is
available
despite being
marked as
non-public

To make the linked document in a new window you can either prepend the link attribute with
'*' (e.g. link="*http://www.example.com" or prepend the src element with '*' (e.g.
*flickr:149666562_debab08866, *image-file etc.) for images that automatically generate links.

To choose horizontal alignment use:

[[=image… - centered image
[[<image… - image on left
[[>image… - image on right
[[f<image… - image on left floating (surrounded by text)
[[f>image… - image on right floating (surrounded by text)

Gallery of images
To insert a series of images into a page content use the [[gallery]] element:

[[gallery size="image-size"]]

or

[[gallery size="image-size"]]
: image-source1 attribute1="value1" attribute2="value2" ...
: image-source2 attribute1="value1" attribute2="value2" ...
...
[[/gallery]]

The allowed attributes within the [[gallery]] tag are:

attribute allowed values default description

sets the size of preview
size "square", "thumbnail", "small", "thumbnail" image
"medium" this option has effect only on
local images or Flickr images
"name", "name desc",
order "created_at", "created_at "name" sets order type
desc"
viewer "false", "no", "true", "yes" "yes" disables LightBox viewer

Order parameter also takes the following deprecated values: "nameDesc", "dateAddedDesc" and
"dateAdded". For consistency with ListPages module it also takes the following values: "name
desc desc" and "created_at desc desc" (meaning the same as without the "desc desc").

If the [[gallery]] tag is invoked without a list of images it automatically displays rescaled
images (thumbnails) of image files attached to the current page (without .pdf and .ps
documents as gallery displays only images by default).

If [[gallery]] is invoked with a list of images, only these images are displayed. image-source
must not be a URL in this case. Allowed "per-image attributes are:

www.wikidot.com/doc:wiki-syntax#toc20 9/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
link - URL or wiki page name (does not work with Flickr images to be o.k. with Flickr
terms)
alt - alternative text when the image is not available

To make a document open in a new window the same rules as with a single image applies.

The gallery by default is using LightBox to view images. It means that if you click on an image
in the gallery, a very nice looking pop-up will show up with a possibility to scroll images
forward / backward without reloading page / opening new tab or window. To disable LightBox
view use parameter:
[[gallery viewer="no"]] or [[gallery viewer="false"]]

Also see FlickrGallery module if you wish to import images from Flickr.

Put the [[gallery]] tag on its own line or the parser will not recognize it.

Notes
Create notes on a page using [[note]] … [[/note]] tags (each on its own line).

This is an example note:

For more information, please contact: support@wikidot.com

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>Custom HTML</h1>
<p>Something else</p>
<img src="anything.png" alt="hello ;-)"/>
[[/html]]

All wiki syntax inside a html block is treated as literal text and not processed.

You can apply styles (both by means of <style type="text/css">…</style> and <element
style="…">) to elements, but styling html and body (that are added transparently to your
content if needed) is not supported. If you need any styling done to the top level elements, do
this by wrapping the whole content of [[html]] block in div with proper style, for example:

[[html]]
<div style="background-color: black; color: lightgreen">
<p>This is a test.</p>
</div>
[[/html]]

This renders the whole HTML block black with text color light green:

This is a test.

Each HTML block on a page has a unique URL that lets you access it individually. You can do it
by right clicking on the HTML block element on the rendered page and choose "Show only this
frame" and check the web address.

Code Blocks
Create code blocks by using [[code]]…[[/code]] tags (each on its own line).

This is an example code block!

All wiki syntax inside a code block except [[include]] tags is treated as literal text and not
processed. To prevent an include tag from being processed, put a single space in front of it.

Each code block on a page has a unique URL that lets you access it individually. This is
especially useful for code blocks that contain CSS code (type = "css"):

www.wikidot.com/doc:wiki-syntax#toc20 10/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
http://mysite.wikidot.com/category:page/code
http://mysite.wikidot.com/category:page/code/2 -- second block

To create PHP blocks that get automatically colorized when you use PHP tags, simply
surround the code with [[code type="php"]]…[[/code]] tags).

To get PHP code colorized you should surround it with <?php.. ?>.

WikiDot.com uses PEAR::Text_Highlighter and supports a number of color schemes. Here is

what is supported (allowed type values):

php, html, cpp, css, diff, dtd, java, javascript, perl, python, ruby, xml.

[[code type="php"]] <?php

<?php /* comment */
/* comment */ for($i=0; $i<100; $i++){
for($i=0; $i<100; $i++){ echo "number".$i."\n";
echo "number".$i."\n"; }
} ?>
?>
[[/code]]

Tables
Simple tables
You can create simple tables using pairs of vertical bars:

||~ head 1 ||~ head 2 ||~ head 3 || head 1 head 2 head 3

|| cell 1 || cell 2 || cell 3 || cell 1 cell 2 cell 3
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 || long cell 4 cell 5
|||||| looong cell 8||
cell 6 long cell 7
looong cell 8

|| lines must start and end || with double vertical bars || nothing ||
|| cells are separated by || double vertical bars || nothing ||
|||| you can span multiple columns by || starting each cell ||
|| with extra cell |||| separators ||
|||||| but perhaps an example is _
the easiest way to see ||

lines must start and end with double vertical bars nothing
cells are separated by double vertical bars nothing
you can span multiple columns by starting each cell
with extra cell separators
but perhaps an example is
the easiest way to see

For a new line inside the table cell use _ (underscore) at the end of the line (see the example
above).

Advanced (custom) tables

To create more advanced tables, special tags can be used that can accept class and style
attributes for managing appearance. To create an advanced table use the following syntax:

www.wikidot.com/doc:wiki-syntax#toc20 11/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
[[table]]
[[row]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
cell 0.0
[[/cell]]
[[cell style="border: 1px solid silver"]]
cell 0.1
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver"]]
cell 1.0
[[/cell]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
cell 1.1
[[/cell]]
[[/row]]
[[/table]]

transforms to…

cell 0.0 cell 0.1

cell 1.0 cell 1.1

Each of elements [[table]], [[row]] and [[cell]] can accept attributes style and class and
they are transformed to (X)HTML tags: <table>, <tr> and <td>.

If you wish to remove the spacing between cells in the above example, change the first line to
[[table style="border-collapse:collapse;"]].

An example of using tables for page layout can be found on our Snippets Wiki at:
http://snippets.wikidot.com/code:layout-with-tables .

Tables can be nested.

Block formatting elements

Left, right, centered and justified
To apply horizontal alignment to a block of text use:

[[<]]
… align left
[[/<]]
[[>]]
… align right
[[/>]]
[[=]]
… align center
[[/=]]
[[==]]
… align justified
[[/==]]

E.g.

[[=]] Lorem ipsum dolor sit amet, consectetuer

adipiscing
Lorem ipsum dolor sit amet, consectetuer elit. Aenean
adipiscing a libero. Vestibulum
elit.\
adipiscing,
Aenean a libero. Vestibulum adipiscing, felis felis ac faucibus\ imperdiet, erat
ac faucibus
imperdiet, erat lacus accumsan neque, lacus
vitaeaccumsan
nonummy neque,
lorem vitae
\ nonummy
pede ac elit. lorem pede ac elit.

Maecenas
Maecenas in urna. Curabitur hendrerit risus in urna.
vitae Curabitur hendrerit
ligula.
[[/=]] risus vitae ligula.

To center a single line use = at the beginning:

= Centered line Centered line

Note: The block formatting tags must be on their own line with nothing after them, not even
a space. For example, [[=]] and [[/=]] must be immediately followed by the return character
(press Enter).

www.wikidot.com/doc:wiki-syntax#toc20 12/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
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 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 right column right column right
left column left column left column column right column right column
left column left column left column right column right column right
left column column right column right column

The ~~~~ element is used to clear floats and translates more or less to <div
style="clear:both"></div>).

Custom [[div]] blocks can be used to create very advanced page layouts.

Math
WikiDot.com uses LaTeX to render beautiful equations. For these who know LaTeX syntax
using wikidot equations should be quite obvious.

Equations
Simply put the equation between [[math label]] … [[/math]] block tags (the label is
optional). The equation is rendered within LaTex \begin{equation} ... \end{equation}
environment. Please refer to any LaTeX reference manual for details about syntax.

[[math label1]]
\rho _{\rm GJ} = -\sigma (r) \left[ (1 - \eta _{\ast }^2 {\kappa \over {\eta ^3}}) \
+ \left. {3\over 2} \theta (\eta) H(\eta)
\xi \sin \chi \cos \phi \right]
[[/math]]

(1)

To refer to a labeled equation simply use [[eref label]] to get a raw number or e.g. Eq.
([[eref label1]]) which gives Eq. (1).

To break long equations use a type="eqnarray" attribute, e.g.

[[math label2 type="eqnarray"]]

\lefteqn{ \cos x = 1
-\frac{x^{2}}{2!} +{} } \\
& & {}+\frac{x^{4}}{4!}
-\frac{x^{6}}{6!}+{}\cdots
[[/math]]

(2)

Inline math
www.wikidot.com/doc:wiki-syntax#toc20 13/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
To use math expressions inside text (sentence) use [[$ ... $]] block tags.

[[$ E = mc^2 $]] is much more popular than is much more popular than
[[$ G_{\mu\nu} - \Lambda g_{\mu\nu} = \kappa T_{\mu\nu} $]]

Footnotes
To make footnotes in the text use [[footnote]] block. To force the list of footnotes
to appear not at the end of the page, use [[footnoteblock]].

Some text[[footnote]]And a small footnote.[[/footnote]]. Here we go

with another footnote[[footnote]]Content of another footnote.[[/footnote]].

[[footnoteblock]]

Some text1. Here we go with another footnote2.

Footnotes
1. And a small footnote.
2. Content of another footnote.

If you are not satisfied with the default title ("Footnotes") you can force your own title by
using [[footnoteblock title="Custom title"]] or even do not use title at all (title="").

Bibliography
The bibliography block is defined by [[bibliography]]...[[/bibliography]]. Each bibliography
item has the form:
label : full reference
To cite a bibliography entry use ((bibcite label)).

The first pulsar was observed by J. Bell and A. Hewish [((bibcite bell))]. Another r

[[bibliography]]
: bell : Bell, J.; Hewish, A.; Pilkington, J. D. H.; Scott, P. F.; and Collin
: guy : Guy, R. K. //Modular Difference Sets and Error Correcting Codes.// §C
[[/bibliography]]

The first pulsar was observed by J. Bell and A. Hewish [1]. Another reference [see 2].

Bibliography
1. Bell, J.; Hewish, A.; Pilkington, J. D. H.; Scott, P. F.; and Collins, R. A. Observation of a
Rapidly Pulsating Radio Source. Nature 217, 709, 1968.
2. Guy, R. K. Modular Difference Sets and Error Correcting Codes. §C10 in Unsolved Problems
in Number Theory, 2nd ed. New York: Springer-Verlag, pp. 118-121, 1994.

If you are not satisfied with the default title ("Bibliography") you can force your own title by
using [[bibliography title="Custom title"]] or even do not use title at all (title="").

Date: How Long Ago?

In several places (forum, private messages, last revision date, …) Wikidot pages use dates
and timestamps that automatically calculate (either when hovering with the mouse or directly
in the text) how long ago this was. Examples are

15 Mar 2009, 13:44 GMT (move the mouse over the date to see the hovering text), or

Sun Mar 15 2009 13:44:00 GMT-0300 (Hora oficial do Brasil).

If you want dates that you type on your pages to also automatically show “how long ago”,
here is how you can do it.

How it Works
The syntax needed is

www.wikidot.com/doc:wiki-syntax#toc20 14/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
[[date timestamp <format="format<|agohover>">]]

where

< … > denote optional parameters

timestamp is the number of seconds between Jan 1, 1970 and the wanted date. To find
this number for a specific date, see Code Wizard below
format is an arbitrary text string that may include %modifiers, which are replaced by an
actual (part of the) date or time. If not specified, format defaults to “%e”
|agohover when specified displays a “hovering” text (“nn seconds/minutes/hours/days
ago”) when the mouse is moved over any part of the displayed format string.

Code Wizard
To find out what code you should use on your page for a specific date,

select the required date and time, 2 May 1960 20 : 51

and type any format string %e %b %Y, %H:%M %Z|agohover

What you type … What you get …

[[date format="1219863060|%e %b %Y, %H:%M %Z|agohover"]]

Then copy/paste the displayed code into your page.

Examples

What you type … What you get …

[[date 1216153821]] Tue Jul 15 2008 17:30:21 GMT-0300 (Hora

oficial do Brasil)
[[date 1216153821 format="%d. %m.
%Y|agohover"]] 15. 07. 2008
[[date 681818400 format="James is %O
young"]] James is 7205 days young
+++ Minutes from [[date 1234567890
format="%e %B|agohover"]] Minutes from 13 February

Limitations

Note that currently

the “how long ago” value for dates that lie in the future is clumsy (it's displayed as e. g.
564 days) and
dates before Jan 1, 1970 are not rendered at all

Additional Note

Note that this How-To is also a good example for a (visually) seamless integration of a
Wikidot page with Javascript code.

Check the source code to see how this can be done.

Author
created by ErichSteinboeck

Include other pages

If you want to include contents of another page use:

[[include pagename]]

or

[[include :sitename:pagename]]

The include tag should start and end with a newline. [[include]] tags are parsed inside code
blocks. To prevent an [[include]] tag from being parsed, put a space in front of it. This does

www.wikidot.com/doc:wiki-syntax#toc20 15/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
make copy/paste of example code that contains [[include]] tags a problem.

The sitename can be a Wikidot subdomain (e.g. :www) or a full name, including a custom
domain.

The [[include]] tag can also take parameters and substitute variables in the included source.
To denote variables in the included page use:

{$var1}, {$number_books}, {$title}, {$variable_name}, {$variableName}

and in the including page use:

[[include pagename var1=value1 |

number_books = 43 |
title=Best Wiki Ever |
variable_name = just a variable |
variableName = another variable ]]

As you can see you can split variable definitions over several lines for cleaner code.

NOTE: includes and images/files: The [[include]] works just by inserting the page source
at a given place. If you have any images or files attached in the included page and you refer to
them as [[image filename.jpg]] in the included page, please rather use the image/file source
with the name of the page too, e.g. [[image included-page/filename.jpg]]

Includes across sites are called cross-site includes or CSIs. CSIs are a powerful way to link
page templates and code from other sites.

Embedding media
Video
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:

Google Video
YouTube

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" sali
FlashVars="playerMode=embedded"> </embed>
[[/embedvideo]]

Audio
To embed audio use [[embedaudio]] ... [[/embedaudio]] and the html embedding code found
on the audio hosting website.

Currently supported are:

Odeo.com

E.g.

[[embedaudio]]
<embed src="http://www.odeo.com/flash/audio_player_standard_gray.swf"
quality="high" width="300" height="52" name="audio_player_standard_gray"
align="middle" allowScriptAccess="always" wmode="transparent"
type="application/x-shockwave-flash" flashvars="audio_id=99133&audio_duration
</embed><br /><a style="font-size: 9px; padding-left: 110px; color: #f39;
letter-spacing: -1px; text-decoration: none" href="http://odeo.com/audio/99133/view"
powered by <strong>ODEO</strong></a>
[[/embedaudio]]

Embedding code from other sites

www.wikidot.com/doc:wiki-syntax#toc20 16/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
Sometimes web sites (mainly social-oriented ones) allow you to paste a code block directly
into other pages in order to increase your site functionality or embed some content from the
original site.

[[embed]] tag
The [[embed]] block tag allows you to do the same with your wiki pages. E.g. to display
del.icio.us tag cloud as generated from http://del.icio.us/help/tagrolls simply wrap the html
code:

[[embed]]
<script type="text/javascript" src="http://del.icio.us/feeds/js/tags/michal_f
[[/embed]]

For the list of supported services please see the page: Embedding code from other services.

Please note that if the code contains <script type="text/javascript"… i.e. just JavaScript, the
content will not be fully rendered when you click preview while editing the page. It should be
there however when you view the page afterwards.

[[iframe]] element
Using the iframe element one can embed content of any other web page. The syntax is

[[iframe url-source attributes]]

and 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

Iftags
Tags are kind of special labels for a page, manually added in by editors by clicking on the tags
link at the page options buttons on bottom of a page. Every tag can be max 64 characters
long, tags are "space" separated and there is no limit of tags per page. Tags are very useful to
label pages and then it's easy to create Tag Cloud, which allow to find interesting pages or
topics much faster.

Special tags start with an underline: they are not automatically shown in tag clouds, but they
can be used as special limitations in [[iftag]] conditions. Tags can be used in ListPages Module
with generic conditions ( +, - ) too.

Iftag is a special condition question. You can use it on every page to "react" on tags and set
up on the particular page used .

Syntax:

[[iftags +tag1 -tag2 tag3]] ... [[/iftags]]

where the +/-"tag#" stands for the requested tag-indexes.

+ before a tagname means - this tag must exist, (tag without a modifier works in a
same way)
- before a tagname means - this tag must not exist.

Example:

[[iftags +science]]
This page is labeled as: science.

Click here to view more science articles >

[[/iftags]]

[[iftags +bug -fixed]]

This is a bug, but it's not fixed yet.
[[/iftags]]

Modules
Modules are independent widgets that can be placed in the pages. The general syntax is:
[[module ModuleName param1="value1" param2="value2" ...]]

www.wikidot.com/doc:wiki-syntax#toc20 17/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
To read more about modules see the modules section of the documentation.

Attached files
what you type what it means

[[file filename | custom- produces a link to a file attached to this page.

text]] custom-text changes the name of a link (custom-text will
be displayed instead of the file name).
[[file /another-
page/filename | custom- produces a link to a file attached to another-page
text]]

The destination file must be first attached to the page — by clicking "files" and "upload file"
from the options at the bottom of any page. Do not use a leading slash on filenames, unless
you really mean that they are attached to the default (start) page.

Users
what you type what you get comments
[[user user-name]]
michal frackowiak user info (no buddy icon)
e.g. [[user michal frackowiak]]
[[*user user-name]]
michal frackowiak user info (with buddy icon)
e.g. [[*user michal frackowiak]]

Social bookmarking
It is easy to add "social bookmarking" buttons to your pages — just write [[social]] (without
any parameters) and get:

This is equivalent to:

[[social blinklist,blogmarks,connotea,del.icio.us,digg,fark,feedmelinks,furl,

You can also choose only selected services, e.g. to choose digg, furl and del.icio.us use:

[[social digg,furl,del.icio.us,facebook]]

and get:

Tip: Use social bookmarking! It is always a good idea to put social shortcuts under an article
or inside your side bar.

Standalone buttons for page options

Sometimes it might be convenient to hide the default page options and present only selected
buttons to the users. The syntax for accomplishing this is:
[[button type options]]

Where the type is: edit, edit-append, edit-sections, history, print, files, tags, source (view
page source), backlinks, talk (works similar as in MediaWiki/Wikipedia), delete, rename, site-
tools, edit-meta, watchers, parent and lock-page.

Possible attributes are:

text — alternative text to be displayed

class — CSS class of the A element
style — CSS style definition

For some nice "view source" and "print" buttons with icons you can use the following code:

[[>]]
[[button source style="background-image: url(http://www.wikidot.com/local--fi
[[button print style="background-image: url(http://www.wikidot.com/local--fil
[[/>]]

www.wikidot.com/doc:wiki-syntax#toc20 18/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
to get:

view source
print

Button for tag update

You can use [[button set-tags <tag_alterations> text="<button_text>"]] to change page
tags easily.

<tag_alterations> is one or more of the following (separated by space):

+tag — will add a tag to the page if not already present
-tag — will remove a tag from the page if present
-* — will remove all the visible tags from the page (those not starting from "_")
-_* — will remove all the hidden tags from the page (those starting from "_")

The action will happen when user clicks on the button and has permissions to edit the page.
The page will reload afterwards (this is useful if you have some iftags constructions on the
page).

Any tag removal will happen before tag addition.

Examples:

code creates button that … when clicked

[[button set-tags +tag1 -tag2
text="Change tags"]] adds tag tag1 and removes tag tag2

[[button set-tags +favorite

+_book -_movie text="Change
tags"]]
[[button set-tags +favorite -*
text="Change tags"]]
[[button set-tags -* -_*
text="Change tags"]]
add tags favorite and _book and removes tag
_movie
add tags favorite and removes other visible tags
(tags starting with "_" are kept)
clears all the tags

[[button set-tags -* +favorite adds tag favorite, removes other visible tags and
+_book text="Change tags"]] adds tag _book keeping all tags starting with "_"

Class and style attributes work like for standalone buttons for page actions.

Layout elements
Tab view
Tab view is a container that creates some clickable tabs that allow to switch between content
to show.

NOTE: TabView breaks TOCs, anchor links and back button

you can't link to anchor inside of a tab

TOC won't link properly to any header inside of a tab
if you click a link from within a tab and go back, you will be always shown the first tab

To generate a tabview, i.e. a set of tabs, the following syntax can be used:

[[tabview]]
[[tab Title of Tab No. 1]]
Content of Tab No. 1.
[[/tab]]
[[tab Title of Tab No. 2]]
Content of Tab No. 2.
[[/tab]]
[[tab Title of Tab No. 3]]
Content of Tab No. 3.
[[/tab]]
[[/tabview]]

This will produce the following tabset:

Title of Tab No. 1 Title of Tab No. 2 Title of Tab No. 3

Content of Tab No. 1.

Tabs will accept any content, but at the moment it is not possible to nest tabviews.

www.wikidot.com/doc:wiki-syntax#toc20 19/20
02/05/2011 Wiki Syntax - Wikidot - Free and Pro …
Another example of tabview can be found at our Snippets Wiki at
http://snippets.wikidot.com/code:tabs

page revision: 140, last edited: 26 Apr 2011, 05:15 GMT (6 days ago)
Start watching: site www.wikidot.com | category doc | this page [?]
Edit Tags Discuss (87) History Files Print Site tools + Options

Hosted and powered by Wikidot.com About Wikidot Search Documentation Community

Official Wikidot blog Snippets Quick reference Handbook
More Than Just a Wiki Terms of Service CSS themes Full syntax
Privacy policy

Unle ss o the rwise state d, the conte nt of this page is lice nse d unde r C re ative C om m ons Attribution-Share Alik e 3.0 Lice nse

www.wikidot.com/doc:wiki-syntax#toc20 20/20