DEV Community

Frederik Van Lierde
Frederik Van Lierde

Posted on

Convert HTML into Markdown and Markdown to 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

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

Test the extension online

Which tags are transformed in both ways

  • Heading 1: h1
  • Heading 2: h2
  • Heading 3: h3
  • bold: <b> + <strong>
  • italic: <i>
  • strike: <s> + <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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

To Markdown

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

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>
Enter fullscreen mode Exit fullscreen mode

To Markdown

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

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();
Enter fullscreen mode Exit fullscreen mode

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 >
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
mteheran profile image
Miguel Teheran

Interesting library

Collapse
 
frederik_vl profile image
Frederik Van Lierde

Thank you
We know alreaday some platform who uses it

  1. The user uses markdown to creat their text
  2. When saving, the platfrm calls MarkdownToHtml
  3. When Editing, the platform calls HtmlToMarkdown

But when the text is showed publicly, as the data is saved in HTML, no transform ws needed