Wikiplex：將 Wiki 編輯模式搬到你家

發行項
06/12/2014

Codeplex 軟體套件（Package）資訊
套件名稱	Wikiplex: A regex wiki engine
作者	Developers: colint, tshak Coordinators: jwanagel, matthaw, Microsoft
目前版本	1.2 Stable
URL	http://wikiplex.codeplex.com/
使用難易度	易
使用此套件時可用的輔助工具	無
基礎知識	基本類別使用。知曉 Regular Expression。熟悉 Wikiplex 支援的巨集（本文有介紹）。

維基百科傳奇

只要是在網路上活動了一定的時間，或是經常上網路找資料查東西的人，相信對維基百科（Wikipedia）不會陌生，這個出現在 2001 年的網路內容協作平台，在數年的發展以及維基媒體基金會（Wikimedia Foundation）的努力下，已經成長到超過 1,400 萬個條目、一百多萬個影像資料、兩千萬個使用者的規模，並且在全球各地均有設置主機以服務大量的查詢與編輯量，可說是網路上最成功的協作式百科全書成功案例。

維基百科由 Jimmy Wales 以及 Larry Sanger 創辦，利用了 Wiki 平台的特性，讓網路上的使用者可以自由的對內容做編撰，而且編撰的範圍是自由不受限的（除了因為某些因素而封閉權限的內容外），在 Wikipedia 中的內容比一般書面的百科全書更快更即時，資料來源都是熱心的網友們，大家都可以在這個開放式的協作平台上貢獻自己的各式資訊－只要是有查證來源的都可以。

NOTE

Wiki 是一種「一種允許一群用戶通過簡單的標記語言來創建和連接一組網頁的社會計算系統」，由 Ward Cunningham 在 1995 年所創造，簡單的說，它可以透過由 Wiki 系統開放的一些編輯語言（HTML 或非 HTML 的語言）自由的編輯內容，而這些語言會轉換成一個標準的 HTML 格式呈現出來，目前維基百科的系統 MediaWiki 就是一種 Wiki 系統，而本文所要介紹的 Wikiplex 也是一種類似的 Wiki 系統。

目前已發展出來的 Wiki 系統，可以參考：http://zh.wikipedia.org/wiki/Wiki%E5%BC%95%E6%93%8E

NOTE

前面所提及的數據，來自維基百科的統計資訊頁：
http://meta.wikimedia.org/wiki/List_of_Wikipedias#Grand_Total

Wiki 編輯系統（Authoring System）

維基百科的編輯系統是由一組巨集（Macro）來組成，這些代碼可以轉換成 HTML 的特定格式呈現，用巨集的方式可以讓使用者不必去了解 HTML 本身就可以撰寫想要的內容格式，同時也可以避免讓使用者直接輸入 HTML 或指令碼所可能造成的 XSS（Cross-site Scripting）攻擊手法。例如下列的範例：

代碼	轉換格式
''斜體''	斜體
'''粗體'''	粗體
'''''粗斜體'''''	*粗斜體*
[http://www.google.com.tw Google]（超連結）	Google
[[Microsoft]]（維基百科條目連結）	Microsoft
==標題== ===次標題=== ====小標題====
文字 :縮排文字	文字　縮排文字
# 項目 1 ## 子項目 1 # 項目 2 # 項目 3 ## 子項目 1	項目 1 子項目 1 項目 2 項目 3 子項目 1
* 項目1 ** 子項目1 * 項目2 * 項目3 ** 子項目1	項目 1 子項目 1 項目 2 項目 3 子項目 1
[[File:Www.wikipedia.org screenshot.png\|thumb\|300px\|Wikipedia.org，是維基百科的首頁，提供所有語言的連結。]]

使用巨集的方式來做，可以大幅的降低使用者的學習量，以及能夠快速的掌握它的使用方式，只要花一點時間將代碼記下來，就能夠輕鬆的編輯其內容，當然維基也有提供快速的工具列以及巨集提示工具以讓使用者能快速的上手。

除了維基百科所使用的 MediaWiki 外，還有很多的 Wiki 軟體在網路上也都找的到，但如果說要導入 Wiki 的編輯模式，如果還要整個將現有系統轉換到其他 Wiki 軟體上，可能會導致開發人員或 MIS 的負擔，因此就有開發人員將 Wiki 的編輯巨集功能轉換成小型輕量的可重覆使用元件，本文所要介紹的 Wikiplex 即是這類型工具。

Wikiplex 簡介

Wikiplex 是一種在 .NET Framework 上所開發，具有處理 Wiki 編輯巨集功能的小型函式庫元件，它提供了數種編輯樣式的格式，以讓使用者可以類似編輯維基百科內容一樣的作法來創立網頁的內容，此元件可以應用在內容管理的系統中。它大量運用了 Regular Expression 來處理巨集剖析的功能，並利用樣板來產生必要的 HTML 指令，如果有心學習 Regular Expression 應用的讀者，可以多看看這個元件的原始程式碼，可以得到很多的心得。

NOTE

Wikiplex 的原始程式碼，可以透過這裡來瀏覽：
http://wikiplex.codeplex.com/SourceControl/list/changesets

若要使用這個元件，請先下載其二進位執行檔，然後在要使用的專案中，加入 WikiPlex.dll 這個元件的參考，即可在程式中使用它。程式呼叫也很簡單，只要建立 WikiplexEngine 的執行個體，然後將放入代碼的文字作為參數，呼叫 Render() 方法，它的傳回值就是轉換過的 HTML 內容。

[C#]

var engine = new WikiPlex.WikiEngine();
string output = engine.Render("This is my wiki source!");

NOTE

如果在 Render 的參數中包含 HTML，則 HTML 會被轉成編碼過的文字輸出，如同 HtmlEncode() 一樣。

Wikiplex 支援代碼格式

Wikiplex 可以支援七種代碼格式，分別為文字格式、圖片、超連結、文法標示、Syndication 支援、視訊以及 Silverlight 支援等，整理如後。

1. 文字格式

基本文字編排（Basic Text Formatting）

巨集

功能

輸出結果

*bold*

_italics_

+underline+

--strikethrough--

I am^^superscript^^

I am,,subscript,,

粗體（* *）

斜體（_ _）

加底線（+ +）

加刪除線（-- --）

上標（^^ ^^）

下標（,, ,,）

bold

italics

underline

strikethrough

I am^superscript

I am_subscript

NOTE

以上的指令可以複合使用，像是粗斜體可以用 _* *_，粗體加底線可以用 +* *+，需要注意的就是巨集格式不對的話，它就不會被剖析轉換。

文字對齊（Text Alignment）

巨集

功能

輸出結果

<{this is left aligned content}<

>{this is right aligned content}>

: this is indented

:: this is double-indented

向左對齊（<{ }<）

向右對齊（>{ }>）

縮排一級（:）

縮排兩級（::）

this is left aligned content

this is right aligned content

this is indented

this is double-indented

NOTE

縮排要縮幾級，就加幾個 “:” 就可以了，筆者實測過加到 :::::（縮排五級）都沒問題，但過度縮排可能會破壞版面。另外，”:” 和文字間要空一格。

標題（Headings）

巨集

功能

輸出結果

! Heading 1

!! Heading 2

!!! Heading 3

!!!! Heading 4

!!!!! Heading 5

!!!!!! Heading 6

標題層次1（!）

標題層次2（!!）

標題層次3（!!!）

標題層次4（!!!!）

標題層次5（!!!!!）

標題層次6（!!!!!!）

Heading 1

Heading 2

Heading 3

Heading 4

NOTE

“!” 和文字間要空一格，否則不會生效。

程式碼區塊（Code Block）－無語法標記

巨集

功能

輸出結果

// multi-line

{{

public static void Main()

{

// code goes here

}

}}

// single line

程式碼區塊（{{ }}）

// multi-line

public static void Main()

{

// code goes here

}

// single line
single line of text

指示不轉換的字串區
巨集	功能	輸出結果
{"text with unrendered wiki markup"}	不轉換的字串區（{" "}）	text with unrendered wiki markup

列表（有編號與無編號）

巨集

功能

輸出結果

* Bulleted List 1

** Bulleted List 2

*** Bulleted List 3

# Numbered List 1

## Numbered List 1.1

### Numbered List 1.1.1

# Numbered List 2

## Numbered List 2.1

無編號列表（*）

有編號列表（#）

Bulleted List 1
- Bulleted List 2
  - Bulleted List 3

Numbered List 1
1. Numbered List 1.1
2. Numbered List 1.1.1
Numbered List 2
1. Numbered List 2.1

NOTE

縮排要縮幾級，就加幾個 “#” 或 “*” 就可以了。另外，指令和文字間要空一格。列表的符號會受到 CSS 的影響，因此你所看到的符號可能會和這裡不同。

表格

巨集

|| Table Heading 1 || Table Heading 2 || Table Heading 3 ||

| Row 1 - Cell 1 | Row 1 - Cell 2 | Row 1 - Cell 3 |

| Row 2 - Cell 1 | Row 2 - Cell 2 | Row 2 - Cell 3 |

功能

表格（請小心使用）：

||標頭1 ||標頭2 || ... || 標頭n ||

...

輸出結果

Table Heading 1	Table Heading 2	Table Heading 3
Row 1 - Cell 1	Row 1 - Cell 2	Row 1 - Cell 3
Row 2 - Cell 1	Row 2 - Cell 2	Row 2 - Cell 3

</td>

NOTE

表格是全部巨集中最複雜的一種，且目前不支援跨列與跨欄，請務必依格式使用。

水平分隔線（Horizontal Rule）

巨集

功能

輸出結果

top content

bottom content

2. 圖片格式

Wikiplex 的圖片功能可支援單圖片、圖片提示、超連結以及文繞圖的格式。

基本圖片
巨集	[image:http://download.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=WikiPlex&DownloadId=74720&Build=15321] [image:WikiPlex Logo\|http://download.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=WikiPlex&DownloadId=74720&Build=15321]
功能	基本圖片：[image:<ImageURL>] 基本圖片含提示：[image:<Prompt Text>\|<ImageUrl>]
輸出結果

圖片帶超連結
巨集	[image:My Image\|http://www.domain.com/myimage.jpg\|http://www.domain.com]
功能	圖片帶超連結：[image:<Friendly Name>\|<image name or link to the image>\|<URL pointed to by image>]
輸出結果

文繞圖
巨集	<[image:http://download.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=WikiPlex&DownloadId=74720&Build=15321] This content will flow around the image on the right hand side. >[image:http://download.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=WikiPlex&DownloadId=74720&Build=15321] This content will flow around the image on the left hand side.
功能	圖片置左：<[image] 圖片置右：>[image]
輸出結果	This content will flow around the image on the right hand side. This content will flow around the image on the left hand side.

3. 超連結格式

一般超連結
巨集	[url:http://wikiplex.codeplex.com] [url:WikiPlex\|http://wikiplex.codeplex.com] [url:Email Someone\|mailto:someone@someurl.com]
功能	超連結：[url:<要指向的 URL>] 以指定的文字形成超連結：[url:<文字>\|<要指向的 URL>] Email連結：[url:Email <文字>\|<Mail 地址>]
輸出結果	http://wikiplex.codeplex.com WikiPlex Email Someone

檔案超連結
巨集	[file:http://wikiplex.codeplex.com/SourceControl/ListDownloadableCommits.aspx#DownloadLatest] [file:Download Latest Source\|http://wikiplex.codeplex.com/SourceControl/ListDownloadableCommits.aspx#DownloadLatest]
功能	檔案超連結：[file:<要指向的 URL>] 以指定的文字形成檔案超連結：[file:<文字>\|<要指向的 URL>]
輸出結果	http://wikiplex.codeplex.com/SourceControl/ListDownloadableCommits.aspx#DownloadLatest Download Latest Source

錨點（Anchor）
巨集	// create an anchor {anchor:anchorName} // link to an anchor [#anchorName]
功能	建立錨點：{anchor:錨點名稱} 連結錨點：[#錨點名稱]
輸出結果	// create an anchor // link to an anchor anchorName

4. 程式碼語法標記（Highlight）

使用有語法標記的巨集標記文字時，巨集會依照指定的程式碼類型將關鍵字或區域變色處理（例如關鍵字用藍色，字串用紅色標記等），讓程式碼文字的可讀性增加。

程式碼區塊（Code Block）－有語法標記

巨集

功能

輸出結果

{code:c#}

using System;

public class HelloWorld

{

public static void Main(params string[] args)

{

Console.WriteLine("Hello World!");

}

{code:c#}

語法標記程式碼區塊（{code[LANG]}{code:[LANG]}）

using System;

public class HelloWorld

{

public static void Main(params string[] args)

{

Console.WriteLine("Hello World!");

}

NOTE

若要使用有標記語法區塊時，[LANG] 要填入程式碼的類型，目前支援的程式碼類型有十三種：

aspx c#
aspx vb.net
ashx
c#
vb.net
c++
html
javascript
sql
java
xml
php
css

5. Syndication 支援

這是 Wikiplex 的特別功能之一，它可以將 RSS feed 自動轉換成 HTML 的輸出，不過筆者覺得功能還不太充份就是了。

Syndication
巨集	{rss:url=https://blogs.msdn.com/codeplex/rss.xml,max=1,titlesOnly=false}
功能	設定輸出 RSS 的內容： {rss:url=<RSS 的來源網址>,max=<最多輸出的 RSS 內容值>,titlesOnly=<是否只輸出標題不輸出內容>}
輸出結果	CodePlex Weblog News Feed Project Owners can now show Job Openings for their individual projects Monday, November 09, 2009 \| From CodePlex Weblog Last Friday, we deployed the latest version of the CodePlex software. Project Job Openings Project owners can now post “job openings” for what sort of help they are looking for. This feature allows people who are interested in joining a project a way to contact the team directly. The Project Owner can now better manage the team and any project openings from the People tab. As always, if you have any feedback here, please let us know. CodePlex Weblog News Feed

6. 視訊支援

視訊功能
巨集	{video:url=mms://wm.microsoft.com/ms/msnse/0607/28366/CodePlexTeam_Final_MBR.wmv,type=windows}
功能	設定網頁中的視訊內容。 {video:url=<來源 URL>,type=<視訊類型>,align=<對齊方向>,width=<寬>,height=<高>} 類型可支援 flash/quicktime/real/windows/youtube。對齊方向可設 left/center/right。寬與高可支援 px/pt/pc/in/mm/cm/%/em/ex 等單位。
輸出結果

NOTE

雖然可以支援多種格式，但它只是將巨集轉換成 HTML 而已，是否能正確播放還是要看用戶端是否有安裝對應的播放器。

7. Silverlight 支援

Silverlight 支援
巨集	{silverlight:url=http://slkit.blob.core.windows.net/xaps/ToolkitBanner.xap,height=280,width=880}
功能	在網頁中插入 Silverlight 內容。 {silverlight:url=<來源 URL>, height =<高>,width=<寬>,version={版本}} 版本可支援 2/3，預設為 3。寬與高可支援 px/pt/pc/in/mm/cm/%/em/ex 等單位。
輸出結果	顯示 Silverlight 內容。

結語

Wikiplex 是一個簡單好用的內容巨集處理元件，適合用在簡單以及使用者對 HTML 並不熟悉的環境，只要有適當程度的說明與指引，使用者會很快的對它上手，如同在維基百科一般。

Wikiplex：將 Wiki 編輯模式搬到你家

維基百科傳奇

Wiki 編輯系統（Authoring System）

Wikiplex 簡介

Wikiplex 支援代碼格式

Heading 1

Heading 2

Heading 3

Heading 4

結語

其他資源