DEV Community

Frederik Van Lierde
Frederik Van Lierde

Posted on

5 2

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay