Are you sick of WYSIWYG editors like TinyMCE and CKEditor destroying the layout of your website?
How good would it be if you could copy and paste from Word without the spaghetti HTML that’s injected into your markup.
The whole purpose of a WYSIWYG editor is to make writing content for the web easier for people that don’t have any experience with HTML. In my experience, however, all it does is create more support calls and a splitting headache.
This is where Markdown comes to the rescue.
What is Markdown?
Markdown is the best tool for web writers and here are some of the reasons why:
- Markdown allows you to write using an easy-to-read, easy-to-write plain text format.
- You don’t need to know any HTML.
- Your layouts stay clean because the rendered HTML is consistent with the way your designer intended.
The screen-shot below shows an example of the Markdown I used to create this post:
In the image above you can see I have written this post inside Visual Studio but you could use any text editor you want. When creating a CMS you can make the body of your post editable through a basic textarea or you could use a fancy front-end widget that makes writing the markdown easier.
For more information on the Markdown specification visit the Daring Fireball website.
How to Convert Markdown to HTML with C#
There are a few open source C# Markdown processors but the two I would recommend are: MarkdownDeep and MarkdownSharp.
Let’s take a look at how to use both in ASP.NET Core.
Option 1: MarkdownSharp
MarkdownSharp is a port of the original Markdown processor that was written in Perl. It’s used by StackOverflow so if you decide to use this option you’re in good company.
You can install MarkdownSharp on ASP.NET Core by adding the following reference to the dependencies section of your project.json file.
"MarkdownSharp.Portable": "1.0.2"
You should now be able to convert Markdown to HTML using the following code:
string text = "# Some Markdown";
var markdown = new MarkdownSharp.Markdown();
string html = markdown.Transform(text);
Now all you need to do is store the plain text markdown in your database and render it before displaying it on the page. You can use the @Html.Raw Razor helper to output the HTML.
Option 2: MarkdownDeep
MarkdownDeep is a faster implementation written by Brad Robinson of Topten Software. In my experience I have found MarkdownDeep better because of its built in option for sanitizing your HTML and extra features like footnotes, headers etc.
As of writing I couldn’t find a NuGet package for installing MarkdownDeep on ASP.NET Core. The easiest way to work around this is to download the source code from the GitHub repository and copy all the source files from the MarkdownDeep project into a folder called Markdown in your ASP.NET Core project.
See the screen-shot below:
There is a function that will need commented out because the System.Drawing does not exist in Core CLR. Open the MarkdownDeep class and comment out the OnGetImageSize function. You will also need to comment out the section that calls the OnGetImageSize function.
Once you have done that you should be able to use MarkdownDeep using the following code:
string text = "# Some Markdown";
var markdown = new Markdown();
markdown.ExtraMode = true;
markdown.SafeMode = true;
string html = markdown.Transform(text);
Check out the documentation on the Topten Software website for further information on using MarkdownDeep.
Have you had any issues with WYSIWYG editors? What are your thoughts on Markdown? Leave a comment if you’re using Markdown for one of your products or services.