Wikidot Tutorial

This page is dedicated to helping people understand how to write in Wikidot and format pages using Wikidot language. Although Wikidot is not a WYSIWYG editor, page content is not edited through HTML. Rather, Wikidot combines elements from HTML and CSS to create a unique system that everyone can understand.

Tool Bar

The first thing that you might notice when going to the editor is the tool bar. This tool bar is very useful for it will automatically place the necessary code for a certain thing to happen. For example, for bold text, you could press the large B button. This will create a **bold text**, and the text between the ** will be bold, like this.

Inline Formatting

Although you could use the tool bar, it is still useful to know what the raw coding is to yield various formatting. Observe the following table. This table shows inline text techniques that can be used to fine tune certain phrases or words and provide emphasis.

Text Style The Code What You Get
Bold **This is Bold** This is Bold
Italic //This is Italic// This is Italic
Underline __This is Underline__ This is Underline
Strikethrough --This is Strikethrough-- This is Strikethrough
Teletype {{This is Teletype}} This is Teletype
Superscript This is ^^superscript^^ This is superscript
Subscript This is ,,subscript,, This is subscript
Invisible Comment [!-- Invisible Comment --]
Combination //**Italic and Bold**// Italic and Bold
Change Color ##green|Green text## or ##AD5A12|Custom Color## Green text or Custom Color
Change Size Size by [[size x-small]]word[[/size]], [[size 130%]]percentage[[/size]], [[size 15px]]pixels[[/size]] Size by word, percentage, pixels
Literal Text @@ //This// **text** __is__ ^^literal^^ @@ //This// **text** __is__ ^^literal^^

Typography

There are other formatting things you can do. The ones above change the text directly. These will help with simple typography and basic page formatting.

The em Dash

An em dash is an elongated hyphen meant to show a break in thought. An em dash looks like — where a hyphen - is much shorter. To get an em dash, simply type two hyphens sequentially, like this: --. One thing you should know about the em dash is that there must be a space between the dash and the words if you have two of them in the same paragraph. Observe the examples below.

These -- em dashes -- have spaces.

These--em dashes--do not.

Only one--em dash.

These — em dashes — have spaces.

Theseem dashesdo not.

Only one—em dash.

Odds are, you won't need to worry about this anomaly.

Headings

You can create headings like the one above. There are six levels of headings that range in size. To create a heading, simply put plus signs in front of the word equal to the heading level.

+ Heading 1
++ Heading 2
+++ Heading 3
++++ Heading 4
+++++ Heading 5
++++++ Heading 6
++You need the space for the heading
A heading must be + on a new line.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

++You need the space for the heading
A heading must be + on a new line.

Table of Contents

A table of contents is simply a box with all the headings in it. These headings are transcribed to links that short cut to the section. An example is the one at the top of this page. To create the table of contents, simply put [[toc]] on its own line. You can also direct where you want the table of contents to float left ([[f<toc]]) or float right ([[f>toc]]).

You can prevent a heading from showing up on the table of contents by appending the pluses with an asterisk.
++* This heading won't appear on the table of contents

Paragraphs

A paragraph on Wikidot is usually not indented. Rather, paragraphs are recognizable by new lines and spaces much like in a business letter.

This is one paragraph.  This paragraph will talk about apples.  Apples grow from trees known as apple trees.  The apple is really a case for the seeds by which contain new apple trees.  These casings are edible so that animals or humans would eat them and then deposit the seeds elsewhere.

This is a new paragraph.  Rather than indenting, it is shown by pressing enter twice.

    This paragraph is using indention.  Notice that the indention does not render.

This is one paragraph. This paragraph will talk about apples. Apples grow from trees known as apple trees. The apple is really a case for the seeds by which contain new apple trees. These casings are edible so that animals or humans would eat them and then deposit the seeds elsewhere.

This is a new paragraph. Rather than indenting, it is shown by pressing enter twice.

This paragraph is using indention. Notice that the indention does not render.

Another thing to note is that pressing enter multiple times will not result in that many spaces. Pressing enter ten times will not create a large space. To counter this, on each new line, place a single underscore after a space.

Here is a code.
 _
 _
 _
Just put a space and an underscore to forge a new line.

Here is a code.



Just put a space and an underscore to forge a new line.

Horizontal Divider

A horizontal divider is just a line that goes after a paragraph to represent a dramatic break in the text. All you have to do is type four or more hyphens (----) to get it.


The horizontal divider simply divides your paragraph further.

Lists

In Wikidot lists can be easily created. You can have bulleted lists or numbered lists.

Bulleted lists use an asterisk to display bullets.

* Item 1
* Item 2
 * Item 2.1
  • Item 1
  • Item 2
    • Item 2.1

Numbered lists use the pound sign to display numbers.

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

The position in the list can be determined by the number of spaces placed before the asterisk or pound sign.

* Item
 * Item
  * Item
   * Item
  • Item
    • Item
      • Item
        • Item

Links

One of the most important text renderings is the production of links. Links are like portals that when clicked take you to another place in the Internet. Links are usually a different color to show that it is a link, and its URL destination is shown in the bottom left corner.

In HTML, a link is usually defined with <a href="URL">Text</a>. However, Wikidot will not accept that particular syntax. Rather, links are usually surrounded by one or three square brackets. Here is a table of the different types of links you can make and their appropriate syntax.

Internal Links

This are links that map within the site.

Type The Code What you Get
Internal Link [[[Board]]] Board
Category Page [[[explicare:home]]] home
Custom Text [[[explicare:home| The Home Page]]] The Home Page
Non-existent Link [[[nowhere]]] nowhere
Link to a Section [[[explicare:home#toc0]]] home

External Links

These are links that go outside of the site.

Text Style The Code What You Get
External Link http://tarm.wikidot.com http://tarm.wikidot.com
Custom Text [http://tarm.wikidot.com The Archive] The Archive
New Window [*http://tarm.wikidot.com The Archive] The Archive
Fake Link [# Can't Click] Can't Click

Emails

Text Style The Code What You Get
Raw Email chsos102@hotmail.com moc.liamtoh|201soshc#moc.liamtoh|201soshc
Custom Text [chsos102@hotmail.com Sung] moc.liamtoh|201soshc#gnuS

Images

Images are an essential part in writing articles providing a little visual pizzazz and making the article slightly more appealing. The code for creating an image is relatively straightforward and not too hard to understand. To create an image, type in [[image URL]] where the URL is the image's URL. So, this code [[image http://npyb.wikidot.com/local--files/explicare:home/nopicinews.png]], will render the image.
nopicinews.png

You can do things to the image with attributes. These attributes follow the URL like this:

[[image URL attribute1="value1" attribute2="value2" ...]]

and you can align the image with the < or >.
[[f>image URL attribute1="value1" attribute2="value2" ...]] - Float right
[[f<image URL attribute1="value1" attribute2="value2" ...]] - Float left
[[>image URL attribute1="value1" attribute2="value2" ...]] - Align right
[[<image URL attribute1="value1" attribute2="value2" ...]] - Align left
[[=image URL attribute1="value1" attribute2="value2" ...]] - Center

The attributes could be any of these things in the table.

Attribute Example Function
link "http://npyb.wikidot.com" This allows the picture to link somewhere.
width "160px", "30%" This will change the width of the image. When no height is given, the image automatically scales itself.
height "160px" This will change the height of the image. When no width is given, the image automatically scales itself.
alt "Image Unavailable" This displays an alternate text in case the image is unavailable.
style "border:1px solid #000;" This will allow you to add CSS styling to the image
class "custom-image" This allows you to pull out a CSS name to render the image.

Here are some examples of images.

[[image http://npyb.wikidot.com/local--files/explicare:home/nopicinews.png link="http://npyb.wikidot.com"]]

nopicinews.png

[[image http://npyb.wikidot.com/local--files/explicare:home/nopicinews.png width="40px"]]

nopicinews.png

[[=image http://npyb.wikidot.com/local--files/explicare:home/nopicinews.png link="http://npyb.wikidot.com" width="60%" height="75px"]]

nopicinews.png

[[image http://npyb.wikidot.com/local--files/explicare:home/non-existantfile.png alt="No Image"]]

No Image

[[>image http://npyb.wikidot.com/local--files/explicare:home/nopicinews.png style="border:2px solid #F00;"]]

nopicinews.png

There is another type of way to display images. With the use of [[gallery]], you can showcase all the pictures that are uploaded to a particular page.

Code Block

To show code, use [[code]]...[[/code]].
For example:

{{@@[[>image http://npyb.wikidot.com/local--files/explicare:home/nopicinews.png style="border:2px solid #F00;"]]@@}}

You can specify the code type. For example, if we were displaying HTML code, we can do [[code type="html"]]...[[/code]].

<p>…that you can use <a href="/tanh">tanh</a>(<sub>E</sub>9X to compute the sign of X?</p>
 
    </div></td>
</tr>
</table>
<table style="background: #4A537D; border: 1px solid #4A537D; width: 100%;">
<tr>
<td class="infobox" style="font-size:140%; text-align:center;"><strong><a href="/top-rated">Top Rated Programs</a></strong></td>
</tr>
<tr>
<td style="background: #FFF; padding: 0 2% 10px;"><div class="list-pages-box">

Collapsible Block

A collapsible block is a link type thing that when clicked pulls down some content.

To do this, simply follow this code.

[[collapsible]]
text here
[[/collapsible]]

The collapsible has the links "show block" and "hide block". You can change those by putting a show="text" and hide="text". For example,

[[collapsible show="+ Click here" hide="- Hide this now"]]
Hello!
[[/collapsible]]

Finally, you can determine whether or not you want it to originally start with it showing or hiding. By adding a folded="yes/no" attribute, you can determine whether it will be hidden first or showing first. If you type yes, then it will be hidden. If you type no, then it will be showing.

Div and Span Blocks

Div and span blocks are the core of the formatting world. These elements allow you to add CSS style to blocks of text or paragraphs. Span is used with [[span style="css"]]...[[/span]]. Span styles a line of text. Div is used with [[div style="css"]]...[[/div]]. Div styles a paragraph of text.

The css is a simple CSS styling to allow you to align text, change color or font, add background, and other things. The table below shows some of the basic attributes used for these.

Attribute Allowed Values Function
border:size style color px or em; solid, dashed, or dotted; hexadecimal code This adds a border around the element
background-color:color hexadecimal code This changed the color of the background
background-image:url(image URL) The image source This makes the background an image
margin:top right bottom left px, %, or em; auto This creates a margin of space. Four values are used for the top margin, right margin, bottom margin, and left margin. Auto centers the div
padding:top right bottom left px, %, or em This pads the text from the outside borders a specified space
color:color hexadecimal code This changes the color of the text.
width:width px, em, or %; auto This sets the width of the block
height:height px or em This sets the height of the block
font-family:font any font name This changes the font of the text
text-align:alignment left, right, or center This allows the text to be realigned
float:float left or right This floats the element which allows text to wrap around the element
text-decoration:decoration underline, overline, or blink This embellishes the text
font-size:size px, pt, or % This changes the text-size in the whole element

The primary difference between span and div is that span is used for inline text, whereas div is used for an entire section. So with span, I can do this, but I cannot with div. The disadvantage that span has is that it cannot use a lot of the attributes listed above. Div can use all of them, and you can use div to create a floating text box anywhere.

Here is an example of a div block with some span styles within it.

Using the div element, I have created a side bar. In this side bar, I can put any content I want. Explaining why I chose the attributes I did, I chose float:right so that this block goes to the right. The margin is set to 0 0 1em 1em. This means that the margin is 0 on top, 0 on the right, 1em on the bottom, and 1em on the left. The padding is set to 0 1em 0 1em which means the text will be 1em from the right and left sides on the inside of this block. So, margin is outside spacing, padding is inside spacing. The background is the hex color #FEEAB6. If you do not know about hexadecimal colors, read here. I set the border to only display on the left by adding the -left after border. You can do this for the top, right and bottom as well. To do combinations, you need separate border commands, for example border-right:code;border-left:code. The width is set to 20em so that it doesn't go the entire width of the screen. By the way, em is a form of measurement.


This text on the other side of the side bar because of the float attribute. Float allows text to "wrap around" a div block or image. This proves useful in formatting a new side bar like this or creating little note blocks.

Notice the horizontal rule does not cut through the div block. This is quite handy since Wikidot automatically resizes the line width. Span style can allow you to change inline text. This allows you to embellish text like making it blink, or changing its size. You can even change letter and word spacing. Of course, you can combine multiple things, as long as it looks pleasing!

The other thing is that within a span element, along with the div element, you can still use the wiki inline styles used before. Bold and italics still work for example.

There are so many possibilities you can do.

Good job! You found this! With span, you can make text white and therefore make it "invisible". The invisible comment syntax, [!-- Something --] will not let you highlight it making it "not present".

⇧⇧⇧ What's with the space? ⇧⇧⇧

Here is the code for the above example. Go ahead and study and learn. By the way, you can escape the float by typing four squiggles (~~~~).

[[div style="float:right; margin:0 0 1em 1em; padding:0 1em 0 1em; background-color:#FEEAB6; border-left:1px solid #000; width:20em;"]]
Using the div element, I have created a side bar.  In this side bar, I can put any content I want.  Explaining why I chose the attributes I did, I chose {{float:right}} so that this block goes to the right.  The margin is set to {{0 0 1em 1em}}.  This means that the margin is 0 on top, 0 on the right, 1em on the bottom, and 1em on the left.  The padding is set to {{0 1em 0 1em}} which means the text will be 1em from the right and left sides on the inside of this block.  **So, margin is outside spacing, padding is inside spacing.**  The background is the hex color #FEEAB6.  If you do not know about hexadecimal colors, read [*http://tarm.wikidot.com/art:computer-images here].  I set the border to only display on the left by adding the {{-left}} after {{border}}.  You can do this for the top, right and bottom as well.  To do combinations, you need separate border commands, for example {{border-right://code//;border-left://code//}}.  The width is set to 20em so that it doesn't go the entire width of the screen.  By the way, [*http://en.wikipedia.org/wiki/Em_(typography) em] is a form of measurement.
[[/div]]
This text on the other side of the side bar because of the float attribute.  Float allows text to "wrap around" a div block or image.  This proves useful in formatting a new side bar like this or creating little note blocks.
----
Notice the horizontal rule does not cut through the div block.  This is quite handy since Wikidot automatically resizes the line width.  [[span style="font-family:Times New Roman; color:#0060FF;"]]Span style can allow you to change inline text.[[/span]]  This allows you to embellish text like [[span style="text-decoration:blink;"]]making it blink[[/span]], or [[span style="font-size:140%;"]]changing its size[[/span]].  You can even change [[span style="letter-spacing:3pt; word-spacing:6pt;"]]letter and word spacing[[/span]].  Of course, you can [[span style="text-decoration:overline; letter-spacing:-2px; color:#FF5623; font-size: 140%; font-family:Gothic Wide;"]]combine multiple things, as long as it looks pleasing![[/span]]

The other thing is that within a span element, along with the div element, you can still use the wiki inline styles used before.  [[span style="color:teal;"]]**Bold** and //italics// still work for example.[[/span]]

There are so many possibilities you can do.

[[span style="color:#FFF;"]]Good job!  You found this!  With span, you can make text white and therefore make it "invisible".  The invisible comment syntax, @@[!-- Something --]@@ will not let you highlight it making it "not present".[[/span]]

= ⇧⇧⇧ What's with the space? ⇧⇧⇧

~~~~

Tables

Tables are very useful being able to chart information in a quick and orderly fashion. Wikidot allows tables to be created very easily for quick tables. There are two types of tables one being quick and easy and the other being a little harder. With tables, you can even perform very advanced formatting that div blocks alone couldn't handle.

Simple Table

A simple table is one of which looks like the tables found above. They are simple in nature and show the information very quickly. Also, the coding is very simple as well.

To create a table, use || (two vertical dividers) to distinguish cells along a row. To create a new column, make a new line. So, this table here:

A B C D E F
1
2
3
4
5

Has the code:

|| ||A||B||C||D||E||F||
||1|| || || || || || ||
||2|| || || || || || ||
||3|| || || || || || ||
||4|| || || || || || ||
||5|| || || || || || ||

With this table, you can create header cells that make the cell a different color and bolds the text. To do that, simply put a squiggle right after the || and then a space. It would look like ||~ Text||. So, we can upgrade the table.

A B C D E F
1
2
3
4
5
||~ ||~ A||~ B||~ C||~ D||~ E||~ F||
||~ 1|| || || || || || ||
||~ 2|| || || || || || ||
||~ 3|| || || || || || ||
||~ 4|| || || || || || ||
||~ 5|| || || || || || ||

You can elongate cells by getting rid of some spaces between the ||'s. The length of the cell is determined by the number of ||'s put in front of the cell divided by two. You do not need to put that many after the cell. You cannot merge cells vertically.
A B C D E F
1
2
3
4
5
||~ ||~ A||~ B||~ C||~ D||~ E||~ F||
||~ 1|||| || || || || ||
||~ 2|| |||| || || || ||
||~ 3|| || || || || || ||
||~ 4|| |||||| || || ||
||~ 5|||||||||||| ||

Custom Tables

You can create more elaborate tables in case you are in need of style or column like formatting. With a custom table, you can define cell colors, borders, cell styles, and place the table. The formatting is much like that of the div block if you feel like getting stylish.

The basic code uses [[table]], [[row]], and [[cell]]. The [[table]] states that a table has started. When you put [[row]], then a new row (meaning horizontal) has been created. When [[cell]] is put, then a cell is made. To end these, use the [[/cell]] and such.

So, a super basic custom table would use those tags.

R1C1 R1C2
R2C1 R2C2
[[table]]
[[row]]

[[cell]]
R1C1
[[/cell]]

[[cell]]
R1C2
[[/cell]]

[[/row]]
[[row]]

[[cell]]
R2C1
[[/cell]]

[[cell]]
R2C2
[[/cell]]

[[/row]]
[[/table]]

That table made above was extremely simple with no customization at all. In order to customize the table, you use the CSS attributes like the ones used for the div blocks. Simply add the code style="css" in the tags. So, to customize the table, you would do [[table style="css"]], and this is similar for the row and cell tags.

Now you can really get down and dirty with tables. The best way to get good at custom tables is by experimenting with the CSS attributes. We can alter that super simple table above and make it so that each cell is a different color, each row has a different font size, and the entire table has a different font.

R1C1 R1C2
R2C1 R2C2

You can get rid of the space by adding the attribute border-collapse:collapse in the [[table style="css"]].

R1C1 R1C2
R2C1 R2C2

You can really get creative using tables and create these text boxes.

Text Box
Using tables, this text box is able to be created. It is very simple. This box is really a two rows by one column table. The title is in the first row, first column, and this text is in the second row, first column. There are tons of things you can do with tables, and experimentation is the best way how!

Math Equations

Another thing that is useful is the math equations syntax. This allows you to easily display a math formula that may have various symbols and signs. Also, the font used makes it seem "mathish". Here are two examples, one is the quadratic formula and the other is a Pythagorean trigonometry rule.

(1)
\begin{align} {-b\pm\sqrt{b^2-4ac}} \over {2a} \\ \\ \sin^2\theta+\cos^2\theta=1 \end{align}

To create a math equation, use the tags [[math]]...[[/math]]. The math coding uses LaTeX to interpret what is being displayed. LaTeX is much different from the ordinary wiki syntax, for example, a superscript like in x2 is written as x^2.

Special symbols and commands are identified with a backslash (\) preceding the command. For example, to display the plus-minus symbol, I typed \pm. The Theta ($\theta$) is written out with \theta.

As a reference, here is a link that leads to an index of the various math commands:
http://www.giss.nasa.gov/tools/latex/ltx-2.html

You can put mathematical expressions inline as well. To render that theta symbol above in between the parentheses, I couldn't use the normal [[math]]...[[/math]] to display it. That command must create a new line. Rather, to put an equation inline, like $E=mc^2$, you must put the LaTeX commands and formatting in between [[$ ... $]]. That is, two brackets and a dollar sign. So, to render Einstein's equation, I put the code [[$ E=mc^2 $]] in between the "like" and "you".

Finally, you can reference math equations that use [[math label#]]...[[/math]]. If you look at the example above, you will notice a little "(1)" on the right side. This is a label. With that label in mind, I can make a reference to equation 1. To do this, simply put [[eref label//#//]] where you want it where # is the label number. As an additional requirement, you must also have the label# after the [[math]].

Here is the code for the math equation used above.

[[math label1]]
\begin{align}
{-b\pm\sqrt{b^2-4ac}} \over {2a} \\ \\
\sin^2\theta+\cos^2\theta=1
\end{align}
[[/math]]

Tabview

Tabview is a special type of formatting used to create tabs with content under each tab. The tabview then allows you to click on the tabs so you can access content under various topics. This form of formatting is used rarely and can cause problems with the table of contents rendering.

As you can see, the tabview looks pretty neat. You are able to quickly switch between different topics of information. This text will be replaced with new text when you click on a new tab. Go ahead and see.

Embedding Code

In Wikidot, you are able to embed code from other sources to produce something like a gadget. With the [[embed]]...[[/embed]], you can take a code for a gadget of some sort and embed it into the site. For example, you can embed a zoho poll. Just put the code in between the embed tags and watch what happens!

[[embed]]
<iframe frameborder='0' src='http://zohopolls.com/external/redbeard/is-polling-cool' width='260' height='210'></iframe>
[[/embed]]

Be careful, however. Some codes will not work, and you will get this message:

Sorry, no match for the embedded content.

You can embed stuff using a different tag called [[iframe]]. Iframe words a little differently in that it allows you to embed any URL. Simply fill out the iframe in this way:
[[iframe URL attributes]]

The attributes could be anything in this chart.

Attribute Allowed Values Function
frameborder 0, 1 This will either turn the border off (0) or on (1). It is on by default.
align left, right, center, middle This aligns the iframe to a specified justification.
width px, % This sets the width of the element.
height px This sets the height of the element
scrolling yes, no This will toggle whether or not you are allowed to scroll if the URL element is too large for the border.
style any CSS attribute This of course lets you use CSS styling.

This concludes the general Wiki syntax tutorial. If you ever have a question, please ask in the forums. Thanks for reading!

Reference: http://www.wikidot.com/doc:wiki-syntax
Written by: Timothy FosterTimothy Foster

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License