Markdown Converter (Markdown ↔ HTML)

Enter Markdown or HTML

Output

Your result will appear here

About Markdown Converter (Markdown ↔ HTML)

Markdown is a lightweight markup language with plain-text formatting syntax, designed to be converted into HTML. It’s widely used because of its simplicity and ease of use. With a Markdown to HTML Converter, you can instantly transform your Markdown content into well-formatted HTML for web display. Similarly, converting HTML to Markdown lets you simplify your web content or documentation in a clean, readable format.

What Is Markdown?

Markdown is often used for writing documentation, articles, and content for blogs or websites. It allows authors to use plain text to apply formatting like headers, lists, bold, italics, and links, all without needing complex HTML tags.

Markdown to HTML Conversion

Converting Markdown to HTML is the most common use of this tool. With the marked() function, you can easily transform Markdown into HTML. The converted HTML is suitable for rendering on web pages and is widely used in many static website generators and blog platforms. For example:

# Markdown Heading

This is a paragraph with **bold** text and *italic* text.

- Item 1
- Item 2

The above Markdown would be converted into HTML like this:

<h1>Markdown Heading</h1>
<p>This is a paragraph with <strong>bold</strong> text and <em>italic</em> text.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

HTML to Markdown Conversion

Sometimes, you might have HTML content that you want to convert back into Markdown format for easier readability or for use in documentation. With the Turndown Service, you can easily convert HTML to Markdown. This process is helpful when extracting and editing content from web pages. For example:

<h1>HTML Heading</h1>
<p>This is a paragraph with <strong>bold</strong> text and <em>italic</em> text.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

This would convert to the following Markdown:

# HTML Heading

This is a paragraph with **bold** text and *italic* text.

- Item 1
- Item 2

JavaScript Example for Markdown ↔ HTML Conversion

Incorporating Markdown ↔ HTML conversion into your web projects is simple with JavaScript. Below are examples of how to use the marked and Turndown libraries for conversion.

Markdown to HTML Conversion Using `marked()`

You can use the marked() function from the marked library to convert Markdown text into HTML. Here's an example of how to do it in JavaScript:

// Sample Markdown content
const markdownText = `
# Markdown Heading

This is a paragraph with **bold text** and *italic text*.

- Item 1
- Item 2
`;

// Convert Markdown to HTML using the marked() function
const htmlOutput = marked(markdownText);

// Display the result
console.log(htmlOutput);

HTML to Markdown Conversion Using `TurndownService()`

To convert HTML content back into Markdown, you can use the Turndown library. The TurndownService() object enables this transformation. Here’s how you can use it:

// Sample HTML content
const htmlText = `
<h1>HTML Heading</h1>
<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
`;

// Create a new TurndownService instance
const turndownService = new TurndownService();

// Convert HTML to Markdown using turndown()
const markdownOutput = turndownService.turndown(htmlText);

// Display the result
console.log(markdownOutput);

How to Integrate This in Your Web Application

1. Load the Libraries: First, include the marked and Turndown libraries in your project using the CDN links:

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.4/marked.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script⥸
<script src="https://cdn.jsdelivr.net/npm/turndown/dist/turndown.js"⥸</script⥸

2. Use the Conversion Functions:

You can call marked() for converting Markdown to HTML, and TurndownService().turndown() for converting HTML to Markdown directly in your JavaScript code.