I explained in Part 1 how to do the basic setup to enable Markdown in BlogEngine.Net. Nothing difficult, merely (un)checking checkboxes and copying files. Here’s the updated tasks list:

1. Switch BlogEngine.net to raw text editor mode to be able to write my post in Markdown (done)
2. Add TextFormatter extension to convert my posts to HTML (done)
3. Improve BlogEngine.net’s raw text editor using markItUp!
4. Add live preview with Showdown
5. Add code syntax highlighting with google code prettify

Today, I’ll work on steps 3, markItUp! integration.

markItUp! Integration

I found no way to integrate markItUp! editor without modifying BE.Net code, so I’ll try to do it with a minimal impact. I’m planning to submit my changes to BE.Net community and:

• I don’t want this change to be difficult to implement for non-programmers
• I don’t want this change to be difficult to include in BE.Net by Authors if they wish
• I don’t want to have too much work to repeat next time I upgrade BE.Net code

That’s the reason why I’ll implement this change as a user control. I’ll make it include all the necessary scripts to transform the current <textarea> into a nice WYSIWYM editor, then I’ll just have to include this user control in the Add_entry.aspx admin page of BE.Net.

Let’s go. First of all, I downloaded markItUp! scripts from Jay Salvat’s site. Please note the number of sets, skins and add-ons on the download page: markItUp! can be used to edit many mark-up languages, including HTML, BBCode or Textile, so this might be useful to any BE.Net user who wants, even occasionally, use the raw editor instead of tinyMCE. Right now, I want an editor that helps me with Markdown syntax so I’ve downloaded markItUp! pack 1.1.5 and Basic Markdown set, I’ve merged them together in a markitup folder I’ve put in the editors folder of BE.Net. I’ve also added a user controls named MarkItUp in the User Controls of BE.Net. This user control has the following properties:

• TextBoxId : the Id of the asp:TextBox control that you want to turn into a markItUp! editor
• Set : the name of set you want to use (default is “default”, for me it’s “markdown”, check markItUp! download page for other sets)
• Skin : the name of the skin you want to use (default is “simple”, more skins available on markItUp! download page)
• IncludeJQuery : this flag is true by default because markItUp! needs jQuery to run, but you might want to turn it off if you already include jQuery in your page for another reason
• BasePath : the path to the markitup folder containing all scripts and style sheets (default is “~/editors/markitup”)

Now, all I need to do is include the control in the /admin/Pages/Add_entry.aspx page with no more than two lines of code. The first line registers my control in the page (3rd line of this snippet)

<%@ Page Language="C#" MasterPageFile="~/admin/admin1.master" AutoEventWireup="true" ... %>
<%@ Register Src="../htmlEditor.ascx" TagPrefix="Blog" TagName="TextEditor" %>
<%@ Register Src="~/User Controls/MarkItUp.ascx" TagPrefix="Blog" TagName="MarkItUp" %>

The second line creates the control and associates it with the rawTextContent textbox. I’ve put it right after the textbox (3rd line of this snippet):

<Blog:TextEditor runat="server" id="txtContent" />
<asp:TextBox runat="server" ID="txtRawContent" Width="100%" TextMode="multiLine" ... />
<Blog:MarkItUp ID="MarkItUp" runat="server" TextBoxId="txtRawContent" Set="markdown" />

I’ll try to publish a full package after I fix a few issues in markItUp! and integrate the preview in next part.