Syntax

This page describes the Markdown used within the ForceCards site. At first glance, it might appear a little overwhelming but you don't need to know any of this to post content to this site. This information is provided for members that want more choices in how to format their profile pages.

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
[[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.

To enter a space between lines of text, hit the enter key twice.

Then the second line of text will appear after the blank line. Text will wrap naturally.

To enter a space between lines of text, hit the enter key twice.

Then the second line of text will appear after the blank line. Text will wrap naturally.

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

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**.

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

Horizontal Rules

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

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

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

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

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 block

With collapsible blocks you can create a hidden block of text that is visible after clicking to unfold it. This feature can also be used to hide spoilers or save space on a page.

[[collapsible]]
Here is some folded text.
[[/collapsible]]

You can also customize the "show" and "hide" text and choose whether or not the block of text is visible or not by default:

[[collapsible show="Show Spoiler" hide="Hide Spoiler" folded="yes"]]
A light saber violates the laws of physics.
[[/collapsible]]

You can also apply custom CSS to further control the look of the collapsible block.

[[div style="background-color: darkgray; padding: 10px;"]]
[[collapsible show="Show Spoiler" hide="Hide Spoiler" folded="yes"]]
A light saber violates the laws of physics.
[[/collapsible]]
[[/div]]

Links

Internal links

To link to another page within this site, you only need to know the specific page URL, you can then apply any anchor text that you prefer:

what you type what you get
[/help Member Help] Member Help
[/members Click here for Members Page] Click here for Members Page

URLs

what you type what you get comments
http://forcecards.com http://forcecards.com simple clickable inline link without anchor text
[http://forcecards.com ForceCards] ForceCards link with anchor text
[*http://forcecards.com ForceCards] ForceCards opens in a new tab
[# empty link] empty link A link that leads nowhere. useful when constructing pull-down menus

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 moc.elpmaxe|troppus#moc.elpmaxe|troppus simple inline email
[support@example.com email me!] moc.elpmaxe|troppus#!em liame 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

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

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 name allowed values example value description
link wiki page name or URL "wiki-page"
"http://www.example.com"
makes image a link to another page or web address; this is ignored when using Flickr as a source; prepend the link with '*' to make it open in a new window
alt any string "a photo of me" text substitution when image not available
width number of pixels "200px" forces width of a image when displaying
height number of pixels "200px" forces height of a image when displaying
style valid CSS style definition "border: 1px solid red; padding: 2em;" adds extra CSS style to the image
class CSS class "mystyle" forces the image CSS class - suggested use only with customized themes

The image-source can be one of the following:

source type format example value
URL address any valid URL address http://www.example.com/image.jpg
file attachment (current page) filename exampleimage.jpg
file attachment (different page) /another-page-name/filename /another-page/exampleimage.jpg

To make the linked document open in a new tab, just prepend the link attribute with '*'. For example:

[[image http://imagesource.com/image001.jpg link="*http://randomsite.com"]]

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 only allowed attribute within the [[gallery]] tag is size with allowed values: "square", "thumbnail", "small", "medium".

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 (including thumbnails for .pdf and .ps documents).

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:

  • link - URL or wiki page name
  • 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.

Code Blocks

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

This is an example code 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
/* comment */
for($i=0; $i<100; $i++){
echo "number".$i."\n";
}
?>
[[/code]]
<?php
/* comment */
for($i=0; $i<100; $i++){
echo "number".$i."\n";
}
?>

Tables

Simple tables

You can create simple tables using pairs of vertical bars, sometimes called pipes:

||~ 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||
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
|| 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:

[[table]]
[[row]]
[[cell style="border: 1px solid silver; background-color: yellow; padding: 10px;"]]
cell 0.0
[[/cell]]
[[cell style="border: 1px solid silver; padding: 10px;"]]
cell 0.1
[[/cell]]
[[/row]]
[[row]]
[[cell style="border: 1px solid silver; padding: 10px;"]]
cell 1.0
[[/cell]]
[[cell style="border: 1px solid silver; background-color: yellow; padding: 10px;"]]
cell 1.1
[[/cell]]
[[/row]]
[[/table]]

What you get

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>. Tables can be nested too.

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 elit.\
Aenean a libero. Vestibulum adipiscing, felis ac faucibus \
imperdiet, erat lacus accumsan neque, vitae nonummy lorem \
pede ac elit.

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

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

Maecenas in urna. Curabitur hendrerit risus vitae ligula.

To center a single line use = at the beginning:

= Centered line

Centered line

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.

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>).

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}}) \cos \chi \right.
+ \left. {3\over 2} \theta (\eta) H(\eta)
\xi \sin \chi \cos \phi \right]
[[/math]]
(1)
\begin{align} \rho _{\rm GJ} = -\sigma (r) \left[ (1 - \eta _{\ast }^2 {\kappa \over {\eta ^3}}) \cos \chi \right. + \left. {3\over 2} \theta (\eta) H(\eta) \xi \sin \chi \cos \phi \right] \end{align}

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)
\begin{eqnarray} \lefteqn{ \cos x = 1 -\frac{x^{2}}{2!} +{} } \\ & & {}+\frac{x^{4}}{4!} -\frac{x^{6}}{6!}+{}\cdots \end{eqnarray}

Inline math

To use math expressions inside text (sentence) use [[$ ... $]] block tags.

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

$E = mc^2$ 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.

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 reference [see ((bibcite guy))].

[[bibliography]]
: bell : 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.
: guy : 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.
[[/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="").

Include other pages

If you want to include contents of another page use:

 [[include pagename]]

The include tag should start and end with a newline.

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]]

Embedding widgets

Any 3rd party widget or custom html can be included using the HTML module. Youtube, Soundcloud, and any iframe are all supported.

Video

What you enter:

[[html]]
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/thk_I4syJSA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</center>
[[/html]]

What you get:

Audio

What you enter:

<center>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/306862331&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</center>

What you get:

Modules

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

To read more about modules see the modules section of the documentation.

Attached files

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

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.

Users

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

Standalone buttons (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).

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--files/files/view-source.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px; color: #444"]]
[[button print style="background-image: url(http://www.wikidot.com/local--files/files/document-print.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;color: #444"]]
[[/>]]

to get:

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:

Content of Tab No. 1.

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

Another example of tabview can be found at our Snippets Wiki at http://snippets.wikidot.com/code:tabs.