How to use ASP.NET MVC 3 and Stack Overflow's Markdown

Stackoverflow open sourced their version of Markdown to the world. Its called MarkdownSharp and is written in C#.

Somebody wrote a HtmlHelper here: http://blog.dantup.com/2011/03/an-asp-net-mvc-htmlhelper-extension-method-for-markdown-using-markdownsharp

If you are looking for how to implement a javascript editor there is an existing question: Integrate Markitup text editor to ASP.NET MVC project

You are probably looking for MarkdownSharp

Open source C# implementation of Markdown processor, as featured on Stack Overflow.

To integrate it into an MVC app:

1. In a until or common controller, add the following action method

   public ActionResult FormatMarkdown(string markdownText)
   {
       var md = new MarkdownSharp.Markdown();
       string html = md.Transform(markdownText);
       return Json(html, JsonRequestBehavior.AllowGet);
   }
   

2. in your client side view:

   @Html.TextArea("mdText", new { rows = 12, cols = 60 })
   <div id="mdFormatted"></div>
   

3. and client side JS:

   $(function () {
       var mdText = $("#mdText");
       var mdFormatted = $("#mdFormatted");
       function setFormatted(data) {
           mdFormatted.html(data);
       };
       mdText.toObservable("keypress")
       .Throttle(200)
       .Subscribe(function () {
           $.getJSON("@VirtualPathUtility.ToAbsolute("~/Util/FormatMarkdown/")", { 
                markdownText: mdText.val() 
               }, setFormatted);
      })
   

4. Download RxJs (from MSDN) and include the following two js files

   <script src="@Url.Content("~/Scripts/rx.js")" type="text/javascript"></script>    
   <script src="@Url.Content("~/Scripts/rx.jquery.js")" type="text/javascript"></script>  
   

I know this question is old but I stumbled upon another solution markdowndeep which is very friendly with MVC

It can be installed through nuget PM> Install-Package MarkdownDeep.Full

Markdown in C#

// Create an instance of Markdown
var md = new MarkdownDeep.Markdown();
// Set options
md.ExtraMode = true;
md.SafeMode = false;
string output = md.Transform(input);

Editor

1.Copy the supplied js, css, png and htm files to your server. Depending where you place these files on your server, you might need to update the image urls in the css file.

2.Update your page to reference jQuery, the MarkdownDeep library and the MarkdownDeep css file (again, you might need to change the paths).

<link rel="stylesheet" href="mdd_styles.css" 
<script type="text/javascript" src="jQuery-1.4.2.min.js">
<script type="text/javascript" src="MarkdownDeepLib.min.js">

NB: MarkdownDeepLib.min.js is a packaged, minified version of MarkdownDeep.js, MarkdownDeepEditor.js and MarkdownDeepEditorUI.js. For debugging, you can reference these three files instead.

3.Insert the Markdown editor into your page like this:

<div class="mdd_toolbar"></div>
<textarea cols=50 rows=10 class="mdd_editor"></textarea>
<div class="mdd_resizer"></div>
<div class="mdd_preview"></div>

Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.

4.Called the MarkdownDeep jQuery plugin to convert the textarea to a MarkdownEditor

$("textarea.mdd_editor").MarkdownDeep({ 
    help_location: "/Content/mdd_help.html",
    disableTabHandling:true
 });

Although I really like their product I am not affiliated with the makers of markdowndeep. I just thought they made a good product