How to convert HTML to Markdown with JavaScript

Markdown is a lightweight markup language with a plain-text-formatting syntax that can be converted to many other output formats. It provides a simple way to add HTML formatting like headings, bold, italic, bulleted lists, images, and so on to the plain text.

In this article, you'll learn how to convert HTML into Markdown in a Node.js application and a web browser using the Turndown library. Turndown is a customizable HTML to Markdown converter written in vanilla JavaScript.

Convert markdown to HTML using Node.js

To use Turndown as a Node.js module, type the following command in your terminal to install it from the NPM registry:

$ npm install turndown --save

After the installation is completed, you'll be able to import the Turndown module into your Node.js application like below:

// import Turndown module
const TurndownService = require('turndown')

Now you can use the Turndown API to easily convert any HTML string to Markdown:

// create an instance of the Turndown service
const turndownService = new TurndownService()

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    <h1>JavaScript for Beginners</h1>
    <p>Follow <a href="https://attacomsian.com/blog">Atta</a> to learn <b>JavaScript</b> from scratch!</p>
`)

// output Markdown
console.log(markdown)

You should see the following output printed on the console:

JavaScript for Beginners
========================

Follow [Atta](https://attacomsian.com/blog) to learn **JavaScript** from scratch!

Convert markdown to HTML using JavaScript

Turndown can also be used in a web browser to convert HTML to Markdown. Just include the following JavaScript file in your HTML document:

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

After including the script, you should be able to convert HTML to Markdown by using the same code we've used in the above example:

// create an instance of the Turndown service
const turndownService = new TurndownService()

// convert HTML to Markdown
const markdown = turndownService.turndown(`
    <h1>JavaScript for Beginners</h1>
    <p>Follow <a href="https://attacomsian.com/blog">Atta</a> to learn <b>JavaScript</b> from scratch!</p>
`)

// output Markdown
console.log(markdown)

In JavaScript, you can even pass DOM nodes as input to Turndown API:

// convert document <body> to Markdown
const markdown = turndownService.turndown(document.body)

// convert first <p> tag to Markdown
const markdown = turndownService.turndown(document.querySelector('p'))

Take a look at the documentation or interactive demo to learn more about Turndown capabilities.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.