Convert HTML to Markdown

By  on  

One of my biggest mistakes with this blog was not finding a WordPress plugin that would allow me to write my posts with markdown; to this day I still need to write posts in "Visual" mode and then manually convert the post to HTML for "Text" mode.  One of these days I want to convert existing posts to Markdown and then enable a plugin that will convert Markdown to HTML. This painful process made me ask myself:  is there a way I can use Node.js JavaScript to convert HTML to Markdown?  There is, and it's called Turndown by Dom Christie.

Convert HTML to Markdown with Node.js

Start by installing Turndown:

yarn add turndown

Then use Turndown's simple API to convert HTML to markdown:

var TurndownService = require('turndown');
var turndownService = new TurndownService();

var markdown = turndownService.turndown(`
    

Title

DavidWalsh.Name is awesome!

`); /* Title ===== [DavidWalsh.Name](https://davidwalsh.name) is awesome! */

You can use the interactive Turndown demo to experiment with its capabilities.  Turndown has a number of options and allows you to use filters to keep elements you believe could be at risk for improper conversion.

Most developers look for a Markdown to HTML solution so it's rate to find myself in a position to need to convert HTML to Markdown.  I look forward to migrating my site's content to Markdown so that writing posts is much less stressful in the future!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

Discussion

  1. Hi David,

    there’s even more you can do with it!

    We explored it in a hackathon:
    Exporting content from Confluence using its ReST api and feed the markdown to a static site generator (like Netlify or Hapi.js).

    Was quite fun :-)

    Sadly I can’t share details because of work during business hours :-(

    Cheers

    André

  2. Jennifer

    Jetpack includes an option to write posts using Markdown. https://jetpack.com/support/markdown/

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!