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

Question

I couldn't find any real sources for this. I'm building a site in ASP.NET MVC 3 and would like to take advantage of the Markdown editor that Stack Overflow uses. Does anybody have a good tutorial?

Where do you download the latest markdown? What language is it written in? Where would I start in integrating this into an MVC 3 project? Even after all the searching and reading I've done I'm still pretty confused.

I came across this site. But this seems outlandishly old and it would seem I would have to learn a little something about CGI and Perl which I have absolutely no experience with. A JavaScript/jQuery version would be splendid.

Update

I noticed this question is getting a fair amount of views so I decided to update it with some helpful references. I managed to get a Markdown editor working nicely on my website, and I wrote a few blogs about it.

• MarkdownSharp and Encoded HTML
• JQuery WMD Plugin
• Finding and implementing the WMD editor

Solution 1

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

Solution 2

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>  
   

Solution 3

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

Solution 4

This question is old, but I'm just leaving an answer here so that future readers can benefit from it.

I have used MarkdownSharp v1.13, It does NOT sanitize your html output. For example, if you type:

<script type="text/javascript">alert("Hacked");</script>

Into your input field, the output from MarkdownSharp contains the same script. Thus it exposes your website to XSS vulnerability.

Read this from Stackoverflow's article on PageDown:

It should be noted that Markdown is not safe as far as user-entered input goes. Pretty much anything is valid in Markdown, in particular something like <script>doEvil();</script>. This PageDown repository includes the two plugins that Stack Exchange uses to sanitize the user's input; see the description of Markdown.Sanitizer.js below.

So, from other point of view, maybe Markdown was not supposed to sanitize your input in the first place and MarkdownSharp implementation of it just conformed with those principles. I should mention that Stackoverflow does uses MarkdownSharp on their server side.

View more solutions

Comments

[Chev]

While the other answer is what really got me on track, I definitely appreciate this as well. Thank you :) +1

[eestein]

Thanks a lot for the snippets :D

[Krisztián Balla]

Thanks. This really is working. But unfortunately the editor is not really customizable. For instance you can't deactivate the preview pane. If you remove it, it is created dynamically. So I'll pass...

[Chev]

I don't believe they use MarkdownSharp anymore, but I could be wrong.