Questo file è preso e copiato di sana pianta dalla home di wikidot. E' un file che spiega con esempi la sintassi della wiki. L'ho copiato e ridotto per renderlo un po' più immediato. La parte che può interessare a chi mastica HTML è quella relativa al tag div per chi ha esigenze estetiche più specifiche e vuole più potenzialità invece che la sola semplicità d'inserimento con cui è pensata una wiki. Il testo originale è in inglese e così lo lascio… ma se giocate in mud non deve essere un problema!
Grin.
Any page of any of the sites exists in two different forms: the source code and the compiled code. Source code is what you can edit and what describes the content of the page. Source code is compiled into the (XHTML) code that is sent to the browser when you view/browse the page. The Wiki Syntax is used to create content of the pages by editing the source code.
If you are looking for wiki code snippets ready to copy/paste/modify, please visit our Code Snippets Site.
Table of Contents
|
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 |
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 imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
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” |
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 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
- Item 1
- Item 2
- 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.
Links
Internal links
Unlike some other wiki engines wikibox.net does not process SqusherAndCapitalized 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" ą pagE | automatic purification of destination page |
[[[category: sample page]]] | sample page | linked to a page with category |
[[[some page | testo ]]] | testo | using custom text |
[[[doc|Documentation]]] | Ducumentation | linking to an existing page (different color) |
[[[doc#toc1|Section 1]]] | Section 1 | linking to an anchor (first section) |
[[[doc#toc1]]] | doc | linking to an anchor (first section) |
URLs
what you type | what you get | comments |
---|---|---|
http://www.wikidot.com | http://www.wikidot.com | simple inline link |
[http://www.wikidot.com wikidot] | wikidot | named link (custom anchor) |
*http://www.wikidot.com [*http://www.wikidot.com wikidot] |
http://www.wikidot.com wikidot |
opens in a new window |
[# empty link] | empty link | link with href="javascript:;" i.e. not leading anywhere. usefull when constructing pull-down menus |
Anchors
To place an anchor use [[# anchor-name]] syntax. To refer to an anchor (and scroll to it) use [#anochor-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 |
size | "square" - 75x75 pixels "thumbnail" - 100 on longest side "small" - 240 on longest side "medium" - 500 on longest side "large" - 1024 on longest side (only for Flickr large images) "original" - original image (Flickr only) |
any of allowed ;-) | displays a resized image; great for thumbnails if flickr is the source it pulls required size from a Flickr server; this option has effect only on local images or Flickr images |
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 type | format | example value | description |
---|---|---|---|
URL address | any valid URL address | http://www.example.com/image.jpg | displays image from the web address |
file attachment (current page) | filename | exampleimage.jpg | displays image attached to the current page |
file attachement (different page) | /another-page-name/filename | /another-page/exampleimage.jpg | displays image attached to a different page |
flickr image | flickr:photoid | flickr:83001279 | displays image from Flickr and links to the original Flickr page |
flickr image (private) | flickr:photoid_secret | flickr:149666562_debab08866 | displays image from Flickr and links to the original Flickr page; if the secret is 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)
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]]
/* comment */ for($i=0; $i<100; $i++){ echo "number".$i."\n"; }
Tables
Simple tables
You can create simple tables using pairs of vertical bars:
||~ head 1 ||~ head 2 ||~ head 3 ||
|| cell 1 || cell 2 || cell 3 ||
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 ||
|||||| looong cell 8||
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 newline 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:
|
transforms to… |
|
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>.
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 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.
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].
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 splid 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]]
Attached files
what you type | what it means |
---|---|
[[file filename]] | produces a link to a file attached to this page |
[[file /another-page/filename]] | 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 michal frackowiak]] |
michal frackowiak | user info (no buddy icon) |
[[*user user-name]] e.g. [[*user michal frackowiak]] |
michal frackowiak | user info (with buddy icon) |
Standalone buttons (page options)
Somehow it might be convenient to hide the default page options and present only selected buttons to the users. The syntax for it 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
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.
Collapsible
Permette di espandere con un click un testo altrimenti non visibile
Default
[[collapsible]]
Del testo da mostrare/nascondere.
[[/collapsible]]
che diventa:
Per avere label d'aperura chiusura diverse:
[[collapsible show="★ mostra il contenuto nascosto" hide="- nascondi il contenuto"]]
Del testo da mostrare/nascondere.
[[/collapsible]]
che diventa:
La label di chiusura può comparire anche sotto il testo espanso e non solo all'inizio; utile ad esempio in caso di testi piuttosto estesi:
Esempio completo