Adding Markdown Support to ASP.NET MVC projects with MarkdownDeep and NuGet

Thursday, March 10th, 2011     #markdowndeep #everything

Add Markdown support to your ASP.NET project in a few simple steps.

First, a little background... Markdown is a web authoring syntax original devised by John Gruber of Daring Fireball. Recently the popularity of Markdown has grown considerably and many popular websites such as Tumblr, Stack Overflow and GitHub now use it as their formatting syntax of choice.

MarkdownDeep is our open-source implementation of Markdown designed specifically for ASP.NET based web servers which includes a high-performance (ie: regex free) translator for .NET and a 100% compatible JavaScript edition. It also includes a client side editor with toolbar, real-time preview and built-in syntax cheat sheet. There's other features too such as support for PHPMarkdownExtra syntax, a safe mode that sanitizes the generated HTML and more.

Enough background, this post is about getting MarkdownDeep into your ASP.NET MVC project... and it couldn't be easier thanks to NuGet. If you're not familiar with NuGet or you've not used it - go read about it and install it right now.

Once you've got NuGet installed we're all set. We're going to create a simple demo project that uses MarkdownDeep to edit a single content page. Most of the code is already written and included in the sample NuGet project, so this is going to be easy:

  1. Fire up Visual Studio 2010 and create a new ASP.NET MVC Empty Project - call it whatever you like, I called mine "MarkdownDeepDemo".

    mdd_tut_1.png
  2. Right click on the project and choose "Add Library Package Reference" to bring up NuGet:

    mdd_tut_2.png
  3. In the tree on the left, expand Online -> All and then type "MarkdownDeep" in the search box in the top right corner:

    mdd_tut_3.png
  4. Click on the MarkdownDeep.Full.Sample package and click Install:

    mdd_tut_4.png

    (yeah I know there's an icon missing... need to look into that)

  5. NuGet will now do it's magic, adding an Assembly reference to MarkdownDeep.dll and a bunch of files to the project:

    mdd_tut_5.png
  6. Finally, open global.asax.cs and edit the default controller route, replacing "Home" with "MarkdownDeep".

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "MarkdownDeep", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );
    

    (this step is optional but saves having to navigate explicitly).

That's it, run the project and you should be presented with the sample pages:

mdd_tut_6.png

Click the Edit this Page link to see the editor:

mdd_tut_7.png

Once you've got it working, you'll probably want to have a peek at the code. The server side code is in MarkdownDeepController.cs:

public ActionResult Index()
{
    // View the user editable content

    // Create and setup Markdown translator
    var md = new MarkdownDeep.Markdown();
    md.SafeMode = true;
    md.ExtraMode = true;

    // Transform the content and pass to the view
    ViewData["Content"] = md.Transform(m_Content);
    return View();
}

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Edit()
{
    // For editing the content, just pass the raw Markdown to the view
    ViewData["content"] = m_Content;
    return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(string content)
{
    // Save the content and switch back to the main view
    m_Content = content;
    return RedirectToAction("Index");
}

The client side editor, is in Edit.aspx

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" type="text/css" href="/Scripts/mdd_styles.css" />
    <script type="text/javascript" src="/Scripts/jQuery-1.4.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/MarkdownDeepLib.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("textarea.mdd_editor").MarkdownDeep({
                help_location:"/Scripts/mdd_help.htm",
                ExtraMode: true
            });
        })
    </script>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <% using(Html.BeginForm()) { %>

        <div class="mdd_toolbar"></div>
        <%=Html.TextArea("content", new { @class="mdd_editor" }) %>
        <div class="mdd_resizer"></div>
        <p><input type="submit" value="Save" /></p>
        <div class="mdd_preview"></div>


    <% } %>

</asp:Content>

And that's about it! There's more information in the QuickReference link on the demo pages, or see the MarkdownDeep home page for more.

Stay tuned (ie: subscribe or follow) for upcoming articles on some of MarkdownDeep's advanced features like safe mode, extra mode, centered figures, url qualification, supplying image sizes and more.

« Older - Quickly locate and open files in Visual Studio Newer - MarkdownDeep - NuGet Packages and Licensing Changes »