Using the Wikidot's editor

Posted by JDPerezgonzalez on 08 Jul 2008 23:35, last edited by RobElliott on 10 Apr 2014 17:50

Tags: editor

rating: +15+x

This page will give you more detailed information on how to edit pages by using Wikidot's editor. However, you will most probably find the editor to be quite straightforward and easy to learn.

Before proceeding, though, it may be of interest to you to know that there are three basic principles when using Wikidot's editor for editing your site:

  • You can use the editor by way of clicking on the appropriate buttons. This will insert the corresponding syntax together with a self-selected description of the function of the button in blue. You need to delete this self-selected description only, substituting it with your own text.
  • You can also write your text first, select it and, then, click on the button. This way, the editor will include the corresponding syntax as appropriate without deleting your text nor adding any self-selected text. This way you can edit part of your text as easy as if you were using Microsoft's Word or similar WYSIWYG word processor.
  • You can also write the corresponding syntax directly, without using the editor's buttons. You will probably find yourself doing this as your proficiency with the editor grows, as this normally is a faster way of editing.

The Wikidot editor

You will find the following features at the top of your editor every time you edit a page in Wikidot:

1. The editor's first row

1.1. Headings

Clicking on the button Heading level 1 will insert the corresponding syntax for a Level 1 heading. However, positioning the mouse pointer on top of the button without clicking on it will open further heading levels from level 2 to level 6. Thus, you can choose the level you need among those. Wikidot's editor will insert the syntax for the appropriate heading together with a self-selected description (e.g. heading level 1). Substitute this self-selected description with your own typing.

In syntax form, you can achieve the different heading levels by typing '+':

  • + Level 1 heading
  • ++ Level 2 heading
  • +++ Level 3 heading
  • ++++ Level 4 heading
  • +++++ Level 5 heading
  • ++++++ Level 6 heading

1.2. Bold text

Clicking on the button Bold will insert the syntax for bold text together with a self-selected description. Substitute the self-selected description with your own typing.

Typing Ctrl b will also insert the syntax for bold text together with the self-selected description.

In syntax form, you can add bold text by typing your text between ** **:

  • **your bold text here** will appear as your bold text here

1.3. Italics

Clicking on the button Italic will insert the syntax for italics together with a self-selected description. Substitute the self-selected description with your own typing.

Typing Ctrl i will also insert the syntax for italics together with the self-selected description.

In syntax form, you can add italics by typing your text between // //:

  • //your text in italics here// will appear as your text in italics here

1.4. Underlining

Clicking on the button Underline will insert the syntax for underlined text together with a self-selected description. Substitute the self-selected description with your own typing.

Typing Ctrl u will also insert the syntax for underlining together with the self-selected description.

In syntax form, you can add underlines by typing your text between __ __:

  • __your underlined text here__ will appear as your underlined text here

1.5. Strikethrough

Clicking on the button Strikethrough will insert the syntax for text stroked through together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can add through strokes by typing your text between -- --:

  • --your stroke through text here-- will appear as your stroke through text here

1.6. Teletype text

Clicking on the button Teletype (monospaced) will insert the syntax for teletype (monospaced) text together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can add teletype text by typing your text between {{ }}:

  • {{your teletype text here}} will appear as your teletype text here

1.7. Paragraph indentation

Clicking on the button Quote will insert the syntax for the indentation of paragraphs together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can add paragraph indentation by typing ">". You can increase indentation levels by typing further ">":

  • > Level 1 indentation
  • >> Level 2 indentation
  • >>> Level 3 indentation

1.8. Superscript

Clicking on the button Superscript will insert the syntax for superscript together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can add superscript by typing your text between ^^ ^^:

  • your ^^superscript^^ text here will appear as your superscript text here

1.9. Subscript

Clicking on the button Subscript will insert the syntax for subscript together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can add subscript by typing your text between ,, ,,:

  • your ,,subscript,, text here will appear as your subscript text here

1.10. Literal text or raw text

Clicking on the button Raw text - escape parsing will insert the syntax for raw text together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can add raw text by typing your text between double @@ characters:

  • your //sample// **text** ^^here^^ will then appear as your //sample// **text** ^^here^^ (instead of as your sample text here)

2. The editor's second row

2.1. Horizontal lines

Clicking on the button Horizontal will insert the syntax for a horizontal line across your page, visually creating sections.

In syntax form, you can add horizontal lines by typing four or more dashes:

  • ------ will, thus, create a horizontal line across the page (similar to that used to separate information pertaining to the editor's first row from that separating information pertaining to the editor's second row.

2.2. Div block element

Check Wiki Syntax

2.3. Clear floats

Check Wiki Syntax

2.4. Tables

Clicking on the button Table wizard will insert the syntax for simple tables of your selected size. You can specified number of rows, number of columns, and whether you want the first raw to contain headers or not.

In syntax form, you can create simple tables by typing the cell contents between two vertical lines "|| ||" (these lines represent the left and right limits of each cell). Add more vertical lines in your line of text to create columns; add more vertical lines in next lines of text to create rows.

  • || cell-1 || cell-2 || will, thus, create a table with two columns and one row (i.e. two cells). E.g.
cell-1 cell-2
  • || cell-1 || cell-2 ||
  • || cell-3 || cell-4 || will create a table with two columns and two rows (i.e. four cells). E.g.
cell-1 cell-2
cell-3 cell-4
  • ||~ header-1 ||~ header-2 ||
  • || cell-3 || cell-4 || will add headings as appropriate. E.g.
header-1 header-2
cell-3 cell-4

2.5. Table of contents

Clicking on the button Table of contents will insert the syntax for a table of contents automatically made up from the information contained in your headings.

In syntax form, you can add tables of content by typing:

  • [[toc]]

2.6. Link to an external webpage

Clicking on the button URL link will insert the syntax for creating a link to a webpage external to your site together with a self-selected description. The self-selected description will be used to type the word or words in your text (anchor text) that will open the desired website. However, don't forget to write the web address in the first part of the syntax, substituting www.example.com with the address of the target website.

In syntax form, you can add a link by typing:

  • [http://target-web-address anchor-text] (e.g. [http://www.wikidot.com wikidot])
  • http:…, https:…, ftp://… and similar locations can be used. Simply write the needed one as appropriate
  • not all webpages start with www… Simply remember to write the correct page (double-check as required)
  • if you want the link to open a webpage in a new window, start the syntax with an asterisk, as follows:

[*http://target-web-address anchor-text] (e.g. [*http://www.wikidot.com wikidot])

  • you may find much easier to use the URL link wizard button

2.7. External link using the wizard

Clicking on the button URL link wizard will prompt you to add all the required information and functions necessary to create and activate your link. It can make your life a bit easier when starting out.

2.8. Internal link to a page in your site

Clicking on the button Page link will insert the syntax for creating a link to page within your site together with a self-selected description. Substitute this self-selected description with the name of your page.

In syntax form, you can create an internal link by typing the name of the page (i.e. the pagename!) between :

  • [[[pagename]]] will create the required link. E.g. [[[start]]] will appear as start)
  • remember that most pages are named as category:pagename. Don't forget to write the category: part.
  • if you want to use an alternative anchor than the namepage, you can provide the anchor text after the name of the page, as follows:

[[[pagename |anchor-text]]]. E.g. [[[start |inicio]]] will appear as inicio, but will link to the page start.

Notice: the maximum length of a page name is 60 characters over all!

2.9. Internal link using the wizard

Clicking on the button Page link wizard will prompt you to add all the required information and functions necessary to create and activate your link.

2.10. Insert image

Check Wiki Syntax

2.11. Inset image wizard

Check Wiki Syntax

2.12. Embed video

Check Wiki Syntax

2.13. Embed audio

Check Wiki Syntax

2.14. Code block

Check Wiki Syntax

2.15. Code block wizard

Check Wiki Syntax


3. The editor's third row

3.1. Numbered list

Clicking on the button Numbered list will insert the syntax for a numbered points together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can create a numbered list by typing "#":

  • # first list element
  • # second list element, will appear as:
  1. first list element
  2. second list element

3.2. Bulleted list

Clicking on the button Bulleted list will insert the syntax for bullet points together with a self-selected description. Substitute the self-selected description with your own typing.

In syntax form, you can create a bulleted list by typing "*":

  • * first list element
  • * second list element, will appear as:
  • first list element
  • second list element

3.3. Increase list indentation

Clicking on the button Increase list nesting will insert a space before a numbered or bulleted point in a list (you will need to have the list element already created).

In syntax form, you can increase list indentation by typing spaces before the numbered or bulleted item:

  • * first list element will have no list indentation.
  • _* second list element (where _ is a blank space), will show indentation as:
  • first list element
    • second list element

3.4. Decrease list indentation

Clicking on the button Decrease list nesting will delete a space before a numbered or bulleted point in a list (you will need to have the list element already created).

In syntax form, you can decrease list indentation by deleting spaces before the numbered or bulleted item.

3.5. Definition list

Clicking on the button Definition list will insert the syntax for a list of items together with a self-selected description. The self-selected description directs you to write the name of a particular item for your list (e.g. a word, a reference, or a webpage location). Substitute the self-selected description with your own typing. Furthermore, substitute the section definition with an explanation of the item. If you need to add more items, simply list them using the same syntax ( : item : definition ).

In syntax form, you can list items by typing your list with the following syntax:

  • : item : definition
  • : item : definition, will appear as:
This website
It provides a model of what we are saying.
This other website
It is a very good site for encyclopedic knowledge on the topic.
This book
It illustrates the theory in greater detail for advanced users.

3.6. Footnote

Clicking on the button Footnote will insert the syntax for footnotes together with a self-selected description. Substitute the self-selected description with your own typing. Wikidot will use this syntax to allocate a number to your footnote in the text, write the footnote in a footnote section at the end of the text together with the default heading Footnotes, and link both. When the text has been saved, pointing to the footnote number will open a window showing the footnote text, so that there is no need to scroll down to the end of the page to read the footnote.

In syntax form, you can add footnotes by typing your text between [[footnote]] [[/footnote]]:

  • [[footnote]] your footnote here [[/footnote]] will appear as1

3.7. Mathematical equation

Check Wiki Syntax

3.8. Inline mathematical equation

Check Wiki Syntax

3.9. Equation reference

Check Wiki Syntax

3.11. Bibliography citation

(Let's discuss this function before the Bibliography block function)

Clicking on the button Bibliography citation will insert the syntax for a citation within the text together with a self-selected description. This self-selection description prompts you to write a one-word keyword (or label) that will be used to link the citation with its full reference in the Bibliography section. Substitute the self-selected description with your own keyword. Wikidot will use this syntax to allocate a number to your citation in the text, write the full reference in the bibliography section at the end of the text together with the default heading Bibliography, and link both. When the text has been saved, pointing to the citation number will open a window showing the full reference, so that there is no need to scroll down to the end of the page to read that reference. [Note: if you create a citation but forget to write the full reference in the bibliography section, Wikidot will show an error message in red font when you exit the editor].

In syntax form, you can add citations by substituting label with your own keyword in the following syntax:

  • [((bibcite label))]

For example, [((bibcite firstlabel))] and [((bibcite secondlabel))] will appear as [1] and [2].

3.10. Bibliography

Clicking on the button Bibliography will insert the syntax for creating a block of references, together with a self-selected description. The self-selected description directs you towards writing the same one-word label that you used in the text to identify a particular citation (e.g. firstlabel). Substitute the self-selected description with your own typing. Furthermore, substitute the section full source reference with your reference. If you need to add more references, simply list them using the same syntax ( : label : full reference ) before [[/bibliography]].

In syntax form, you can add references by creating the bibliography block in separate lines, and writing your reference syntax in between the blocks, as follows:

  • [[bibliography]]
  • : firstlabel : first full reference in the bibliography section
  • : secondlabel : second full reference in the bibliography section
  • [[/bibliography]] , will appear as:
Bibliography
1. first full reference in the bibliography section.
2. second full reference in the bibliography section.

Authors

JDPerezgonzalezJDPerezgonzalez


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.