We can use the Turndown library to easily convert HTML to markdown in JavaScript.
Installing Turndown From NPM
To get started with Turndown we can install it from NPM using this command:
npm i turndownAfter the installation, we’ll be able to import it into a JavaScript module, like this:
import TurndownService from 'turndown';
For a Common JS module, we’ll import it like this instead:
const TurndownService = require('turndown');
Now we can use the turndown module to easily convert any HTML string to markdown:
import TurndownService from 'turndown';
const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://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:
Learn Web Development
=====================
Check out [Coding Beauty](https://codingbeautydev.com/blog) for some great tutorials!Using Turndown in a Browser With a script Tag
We can also use Turndown in a browser by importing the Turndown script using a script tag:
<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:
const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://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:
// convert document <body> to Markdown
const bodyMarkdown = turndownService.turndown(document.body);
// convert first <div> tag to Markdown
const divMarkdown = turndownService.turndown(document.body);
Passing Options to Turndown
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.
For example:
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:
- HTML
- CSS
- JavaScriptThe bullerListMarker also accepts other values, like the * character:
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:
* HTML
* CSS
* JavaScript11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
