Convert HTML into Markdown and Markdown to HTML
Tags: dotnet, markdown, html
Published: 2022-09-15 13:41:23

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](https://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](https://www.nuget.org/packages/CodeHelper.Core.Extensions/latest)

## 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](https://frederik.today/codehelper)


## Which tags are transformed in both ways

- Heading 1: `h1`
- Heading 2: `h2`
- Heading 3: `h3`
- bold: `<b> + <strong>`
- italic: `<i>`
- strike: `
 + <strike>`
- quote: `<q>`
- break line: `<hr /> + <hr>`
- mark: `<mark>`
- sub: `<sub>`
- sup: `<sup>`
- code: `<code>`
- fenced code block: `<code>multiple lines`
- link: `<a href..`
- image `<img src...`
- ordered list: `<ol>`
- unordered list: `<ul>`
- definition list: `<dl>`

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 >
```