Wiki Syntax

This document describes the Wiki Syntax used within the Wikidot.com project.

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 Sytnax is used to create content of the pages by editing the source code.

由於wikidot 開發許多特別的 wiki 語法(wiki syntax), 整理在此當作筆記也與中文使用者交流。
另外,我個人認為wikidot 的所見即所得編輯板頗詳盡也頗創意,如果嫌麻煩其實可以跳過這頁。

Inline Formatting 內文格式

輸入語法 呈現的格式 備註
斜體 //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 --] 於編輯板內提供的提醒,共同編輯文章時專用
style 設定 [[span style="color:red;font-size:14pt;"]]以style 設定顏色與字體大小[[/span]] 以style 設定顏色與字體大小 這有點點難
字體顏色 ##blue|predefined## or ##44FF88|custom-code## color predefined or custom-code color

Paragraphs and newlines 段落與斷行

這邊沒啥好說的。按一次enter 是謂斷航;兩次enter 就成了段落。

Typography 印刷排版?

這個部分我不是太懂,有什麼用處呢?

輸入 呈現
“‘`quotation” || quotation’'
“‘quotation’ ‘` `quotation’
``quotation”“ quotation”
dots... dots…
em -- dash em — dash

Literal Text 逐實呈現的文字

如果打算呈現你所key in 的任何符號文字而不受wiki 語法影響,可以於文字前後各加上``
這個符號就 ~ 底下

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

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

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

Comments 說明

[!-- ... --] … 所代表的文字不會呈現在文章上面,但會出現在原始碼內。

[!--
這裡的文字只會出現在編輯板上或原始碼內
--]

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

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Table of Contents 目次

讓整個頁面的目次可以浮動排版。

[[toc]] - 一般而言只有fold 或 unfold, 位置在正文的上方
[[f>toc]] - 整個目次欄置右,像wikipedia.
[[f<toc]] - 整個目次欄置左

Horizontal Rules 水平線

使用4個或更多的- (----) 作出水平分格線.

Lists 列表

以 * 或 # 來作為列表元素,兩者可以結合使用

條例式

* Bullet 1
* Bullet 2
* Bullet 2.1
  • Bullet 1
  • Bullet 2
  • Bullet 2.1

序號式

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

Definition Lists

可以使用下列語法產生補充說明型式列表

: Item 1 : Something
: Item 2 : Something else
Item 1
Something
Item 2
Something else

Block Quotes 引用

使用一個以上的 '>' 這個符號, 後面跟著的文字就是引用(書籍或言論)

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 連結

內部連結

wikidot 採用連續三層的[]符號作為頁面連結

輸入語法 得到結果 說明
[[[link-to-a-page]]] link-to-a-page 照本宣科的頁面名稱連結
[[[link "TO" ą pagE]]] link "TO" ą pagE
[[[category: sample page]]] sample page 連結到某個分類的頁面
[[[some page| custom anchor]]] custom anchor using custom anchor text
[[[doc|Documentation]]] Ducumentation linking to an existing page (different color)

Urls 網址

輸入 得出 說明
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
在網址前頭打上星號*就會另開新頁

Emails 信箱

輸入 得出 說明
support@example.com moc.elpmaxe|troppus#moc.elpmaxe|troppus simple inline email
[support@example.com email me!] moc.elpmaxe|troppus#!em liame custom anchor

InterWiki 連結同樣是 wiki 的他站資料

比方你要連結到同是wiki格式的網站 Wikipedia 的文章可以使用下列語法:

輸入 得到
[wikipedia:Albert_Einstein] Albert_Einstein
[wikipedia:Albert_Einstein Albert] Albert

其他的連結方式

  • [google:free+wiki] - 用google搜尋 "free wiki" 這個詞彙
  • [dictionary:wiki] - 尋找 wiki 這個字在 dictionary.reference.com 裡的定義

圖像

單一圖像

將圖像插入文章可使用下列語法:

[[image image-source 屬性1="value1" 屬性2="value2" ...]]

image-source(圖像來源)有幾種方式,最簡單的,就是直接填上圖像網址,例如:http://wikidot.com/photos/image.jpg
請注意:網址兩端不必使用 " '", 屬性的值(value)才需要。

什麼是屬性呢?以下舉例:

屬性名稱 舉例 敘述
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

image-source 可以是下列幾種方式

來源型態 格式 舉例 說明
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

若要將上傳的圖片進行配置,參考下列語法

  • [[=image… - centered image
  • [[<image… - image on left
  • [[>image… - image on right
  • [[f<image… - image on left floating (文繞圖,圖在左邊)
  • [[f>image… - image on right floating (文繞圖,圖在右邊)

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 imageable files attached to the current page (this also include thumbnails for any .pdf or .ps document).

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

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

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 表格

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

Block formatting elements 形式配置

左、右、中間、字間調整

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

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

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

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.

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.

Include other pages

If you want to include contents of another page use:

[[div class="error-block"]]
Included page "pagename" does not exist ([/pagename/edit/true create it now])
[[/div]]

The include tag should start and end with a newline.

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:

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" salign="TL"
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:

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=282.0&valid_sample_rate=true&external_url=http://www.vitalpodcasts.com/FileSystem/podcasts/89/opensource_episode1.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</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

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 contet from the original site.

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_frackowiak?icon;size=12-35;color=87ceeb-0000ff;title=my%20del.icio.us%20tags"></script>
[[/embed]]

Currently supported are:

New options will be added.

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.

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

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 frackowiakmichal frackowiak user info (with buddy icon)

Social bookmarking

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

BlinkListblogmarksdel.icio.usdiggFarkfeedmelinksFurlLinkaGoGoNewsVineNetvouzRedditYahooMyWebFacebook

This is equivalent to:

[[social blinkbits,blinklist,blogmarks,co.mments,connotea,del.icio.us,de.lirio.us,digg,fark,feedmelinks,furl,linkagogo,ma.gnolia,newsvine,netvouz,rawsugar,reddit,scuttle,shadows,simpy,smarking,spurl,tailrank,wists,yahoomyweb]]

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

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

and get: diggFurldel.icio.us

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


我個人覺得可以左右配置圖片與精簡表格語法都算是很棒的創舉。
還沒改完,待續…

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