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 的所見即所得編輯板頗詳盡也頗創意,如果嫌麻煩其實可以跳過這頁。
Table of Contents
|
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
- Item 1
- Item 2
- 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]]
/* 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]]
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].
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:
- del.icio.us tagrolls
- del.icio.us linkrolls
- del.icio.us "Save this page"
- Digg news
- spreadfirefox.com affiliate buttons
- StatCounter tracking code
- FeedBlitz — subscription form & "feed count chicklet"
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 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:
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:
Tip: use social bookmarking! It is always a good idea to put social shortcuts under an article or inside your side bar.
我個人覺得可以左右配置圖片與精簡表格語法都算是很棒的創舉。
還沒改完,待續…