How to Easily Convert Any HTML String to Markdown in JavaScript

We can use the Turndown library to easily convert HTML to markdown in JavaScript.

To get started with Turndown, we can install it from NPM using this command:

Shell
npm i turndown

After the installation, we’ll be able to import it into a JavaScript module like this:

JavaScript
import TurndownService from 'turndown'

For a Common JS module, we’ll import it like this instead:

JavaScript
const TurndownService = require('turndown');

Now we can use the turndown module to easily convert any HTML string to markdown:

JavaScript
import TurndownService from 'turndown'; const html = ` <h1>Learn Web Development</h1> <p>Check out <a href="https://wp.codingbeautydev.com/blog">Coding Beauty</a> for some great tutorials!</p> `; // Create an instance of the Turndown service const turndownService = new TurndownService(); const markdown = turndownService.turndown(html); console.log(markdown);

This code will have the following output:

Markdown
Learn Web Development ===================== Check out [Coding Beauty](https://wp.codingbeautydev.com/blog) for some great tutorials!

Use Turndown in browser with script tag

We can also use Turndown in a browser by importing the Turndown script using a script tag:

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

After including the script, we’ll be able to convert HTML to Markdown just as easily as we did in the previous code example:

JavaScript
const html = ` <h1>Learn Web Development</h1> <p>Check out <a href="https://wp.codingbeautydev.com/blog">Coding Beauty</a> for some great tutorials!</p> `; // Create an instance of the Turndown service const turndownService = new TurndownService(); const markdown = turndownService.turndown(html); console.log(markdown);

In the browser, we can also pass DOM nodes as input to Turndown:

JavaScript
// convert document <body> to Markdown const bodyMarkdown = turndownService.turndown(document.body); // convert first <div> tag to Markdown const divMarkdown = turndownService.turndown(document.body);

Customize HTML to Markdown conversion

We can pass options to Turndown to customize how it should convert an HTML string to Markdown. Options can be specified in the constructor when creating a new instance of the Turndown service.

JavaScript
import TurndownService from 'turndown'; const html = ` <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript<li>`; // Specifying options when creating an instance of the // Turndown service const turndownService = new TurndownService({ bulletListMarker: '-' }); const markdown = turndownService.turndown(html); console.log(markdown);

Here, we use the bulletListMarker property to specify that Turndown should use the - symbol to indicate a list item in the Markdown. So this will be the output of the code:

Markdown
- HTML - CSS - JavaScript

The bulletListMarker also accepts other values, like the * character:

JavaScript
import TurndownService from 'turndown'; const html = ` <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript<li>`; // Specifying options when creating an instance of the // Turndown service const turndownService = new TurndownService({ bulletListMarker: '*' }); const markdown = turndownService.turndown(html); console.log(markdown);

This will produce the following output:

Markdown
* HTML * CSS * JavaScript


Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Every Crazy Thing JavaScript Does

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *