Convert HTML into Markdown and Markdown to HTML

#dotnet #markdown #html

Markdown is a plain text formatting syntax aimed at making writing for the internet easier.

The philosophy behind Markdown is that plain text documents should be readable without tags mussing everything up, but there should still be ways to add text modifiers like lists, bold, italics, etc.

It is an alternative to WYSIWYG (what you see is what you get) editors, which use rich text that later gets converted to proper HTML.

This website, Dev.To used markdown editing, so I guess I don't need to explain more what markdown is :)

Let's see how we can implement this into your .Net project

Prerequisites

CodeHelper.Core.Extensions

Transform existing HTML into Markdown

An example could be that you already have a blog post and you want to post it on other websites that are using markdown.

using CodeHelper.Core.Extensions;

string _markdown = _htmlPage.HtmlToMarkDown();

Transform existing Markdown into HTML

An example could be that your articles are posted here on Dev.To you want to have it available on your blog as well. A blog that accepts HTML only.

using CodeHelper.Core.Extensions;

string _html = _myDevToArticle.MarkDownToHtml();

Test the extension online

Test Online

The extension can handle multiple tags, including lists as well

1. Item 1
2. Item 2

## Title 
1. Item 2
2. Item 3

This will result in:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

<h2>Title</h2>
<ol>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

Examples

Definition List

Convert HTML

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

To Markdown

: **Beast of Bodmin**
 A large feline inhabiting Bodmin Moor.
 : **Morgawr**
 A sea serpent.
 : **Owlman**
 A giant owl-like creature.

Definition List

Convert Markdown

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

To Markdown

: **Beast of Bodmin**
 A large feline inhabiting Bodmin Moor.
 : **Morgawr**
 A sea serpent.
 : **Owlman**
 A giant owl-like creature.

Blog Post to Html

Let's take parts of this posts in Markdown

# Convert HTML into Markdown  and Markdown to HTML

Markdown is a plain text formatting syntax aimed at making writing for the internet easier.

## Prerequisites
- [CodeHelper.Core.Extensions](https://www.nuget.org/packages/CodeHelper.Core.Extensions/1.3.2)


using CodeHelper.Core.Extensions;
string _html = _myDevToArticle.MarkDownToHtml();

which will convert into Html

<h1>Convert HTML into Markdown  and Markdown to HTML</h1>

Markdown is a plain text formatting syntax aimed at making writing for the internet easier.

<h2>Prerequisites</h2>
<ul>
  <li><a href="https://www.nuget.org/packages/CodeHelper.Core.Extensions/1.3.2">CodeHelper.Core.Extensions</a></li>
</ul>
<code >
using CodeHelper.Core.Extensions;

string _html = _myDevToArticle.MarkDownToHtml();
</code >