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 amsuperscript

I amsubscript

 

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

Heading 5
Heading 6

 

NOTE

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

 

程式碼區塊（Code Block）－無語法標記
巨集 功能 輸出結果

// multi-line

{{

   public static void Main()

   {

     // code goes here

   }

}}

// single line

{{ single line of text }}

 程式碼區塊（{{ }}）

// 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
  1. Numbered List 1
    1. Numbered List 1.1
    2. Numbered List 1.1.1
  2. 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 ||

|列1 –儲存格 1|列1 –儲存格 1|...|列1 –儲存格 1|

|列2 –儲存格 2|列2 –儲存格 2|...|列2 –儲存格 2|

...

|列n –儲存格 n|列n –儲存格 n|...|列n –儲存格 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

 

NOTE

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

 

水平分隔線（Horizontal Rule）
巨集 功能 輸出結果

top content

----

bottom content

 水平分隔線（----）

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>]
輸出結果
WikiPlex Logo

 

圖片帶超連結
巨集 [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=http://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 並不熟悉的環境，只要有適當程度的說明與指引，使用者會很快的對它上手，如同在維基百科一般。

摘錄自：http://msdn.microsoft.com/zh-tw/ee939356.aspx

arrow
arrow
    全站熱搜

    Zabo 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄