Markdown 算是小有名氣的標記語言,可以用來編輯文件,之前工作時所撰寫的文件,也都是用 Markdown 維護。只是文件都是放在網站上,要用電腦的軟體去編輯總是有些不便,如果有個線上編輯介面,就會方便許多。因此我尋找可用的元件來達到目的,後來找到了 MarkdownDeep。
http://www.toptensoftware.com/markdowndeep/api
要在 ASP.NET 的網站上使用 MarkdownDeep,只要利用NuGet搜尋 markdowndeep 即可,記得要安裝 .NET and JavaScript 這個版本。
接下來新增一個共用的 View,命名為 _MarkdownView,原始碼如下,注意到裡面會引用到mdd_styles.css以及 MarkdownDeepLib.min.js 這些必要的檔案。
接下來在 Controller 新增 TestInpu 這個 Action,而 View 如下。
然後新增以下 JavaScript,這是用來顯示編輯介面。
最後,從 Scripts 資料夾移動 MarkdownDeep 的相關檔案到 Content。
最後啟動網站,就可以看到以下介面,輸入 Markdown 語法,底下會顯示預覽結果。
接下來修改 View,將輸入的文字傳回後端然後轉譯為真正的 Html。
修改 Action,注意到 API 的用法相當簡單,只有一行而已,Action 最後會將結果傳到 MarkdownView。
最後新增 MarkdownView,用來顯示轉譯後的結果。
執行結果