About Markdown Toolkit

This Markdown toolkit provides a live preview editor for writing Markdown with instant HTML rendering, plus an HTML-to-Markdown converter for reverse transformation. It supports CommonMark and GitHub Flavored Markdown syntax for comprehensive documentation writing.

What is Markdown?

Markdown is a lightweight markup language created by John Gruber in 2004. It uses plain text formatting symbols that convert to HTML, enabling writers to focus on content rather than visual styling. Markdown has become the standard for:

• Software Documentation: GitHub READMEs, API docs, changelogs
• Static Sites: Jekyll, Hugo, Gatsby, Next.js blogs
• Forums & Chat: Reddit, Discord, Slack, Stack Overflow
• Note-taking: Obsidian, Notion, Bear, iA Writer
• Content Management: Ghost, Netlify CMS, Contentful

Markdown Syntax Reference

Markdown Table Syntax

Tables are part of GitHub Flavored Markdown (GFM):

Markdown Table:

| Name       | Age | City        |
|------------|-----|-------------|
| Alice      | 25  | New York    |
| Bob        | 30  | San Francisco|
| Charlie    | 35  | Seattle     |

Renders as:
┌───────────┬─────┬───────────────┐
│ Name      │ Age │ City          │
├───────────┼─────┼───────────────┤
│ Alice     │ 25  │ New York      │
│ Bob       │ 30  │ San Francisco │
│ Charlie   │ 35  │ Seattle       │
└───────────┴─────┴───────────────┘

Alignment with colons:
| Left      | Center | Right     |
|:----------|:------:|----------:|
| aligned   | text   | here      |

:--- = left align (default)
:--: = center align
---: = right align

HTML to Markdown Conversion Reference

Markdown Conversion Algorithm

JavaScript HTML to Markdown Conversion:

function htmlToMarkdown(html) {
  return html
    // Headings
    .replace(/
(.*?)<\/h1>/gi, "# $1\n")
    .replace(/
(.*?)<\/h2>/gi, "## $1\n")
    .replace(/
(.*?)<\/h3>/gi, "### $1\n")
    // Text formatting
    .replace(/(.*?)<\/strong>/gi, "**$1**")
    .replace(/(.*?)<\/b>/gi, "**$1**")
    .replace(/(.*?)<\/em>/gi, "*$1*")
    .replace(/(.*?)<\/i>/gi, "*$1*")
    // Links and images
    .replace(/(.*?)<\/a>/gi, "[$2]($1)")
    .replace(//gi, "")
    .replace(/<\/ul>/gi, "")
    .replace(/
(.*?)<\/li>/gi, "- $1\n")
    // Other elements
    .replace(//gi, "\n")
    .replace(/
(.*?)<\/p>/gi, "$1\n\n")
    .replace(/(.*?)<\/code>/gi, "`$1`")
    .replace(/
(.*?)<\/blockquote>/gi, "> $1")
    // Remove remaining tags
    .replace(/<[^>]+>/g, "")
    // Clean up whitespace
    .replace(/\n{3,}/g, "\n\n");
}

// Usage:
const html = "
Hello
This is bold text.
";
const md = htmlToMarkdown(html);
console.log(md);
// # Hello
//
// This is **bold** text.