Turn Any Webpage to Markdown with this Ridiculously Simple Bookmarklet

Have you ever found yourself needing to quickly convert web content into Markdown format? Whether you’re writing documentation, preparing content for a GitHub repository, or maintaining a blog, converting HTML to Markdown manually can be tedious. Today, I’ll share a powerful bookmarklet that makes this process effortless.

What is a Bookmarklet?

A bookmarklet is just a browser bookmark that contains JavaScript code instead of a URL. When you click it, instead of taking you to a website, it runs that JavaScript code on whatever page you’re currently viewing. Think of it like a tiny browser extension that lives in your bookmarks bar — one click and it does something useful with the current webpage.

What Does This Bookmarklet Do?

This bookmarklet leverages the excellent Turndown library to convert HTML content into clean, well-formatted Markdown. Here’s what makes it special:

1. It works with selected content: Just highlight any text on a webpage, click the bookmarklet, and get instant Markdown conversion.
2. Smart fallback behavior: If nothing is selected, it automatically looks for the main content area of the page (article, main content, etc.).
3. Instant preview: Shows your converted Markdown in a modal window with copy functionality.

How to Install the Bookmarklet

1. Create a new bookmark in your browser
2. Name it something like “HTML to Markdown”
3. Copy this code as the URL (right-click and select “Copy code”):

How to Use It

Using the bookmarklet is straightforward:

1. Find any webpage with content you want to convert
2. Optional: Select specific text you want to convert
3. Click the bookmarklet
4. A modal window will appear with your converted Markdown
5. Click “Copy” to copy the Markdown to your clipboard
6. Click “Close” when you’re done

If you don’t select any specific content, the bookmarklet will intelligently try to find the main content of the page by looking for common HTML elements like <article>, <main>, or elements with specific roles and classes.

If it doesn’t work for some reason, I suggest just selecting the text as described above.

Technical Details

The bookmarklet is built with vanilla JavaScript and uses the Turndown library for HTML-to-Markdown conversion. It’s configured to use:

• ATX-style headers (# instead of underlining)
• Fenced code blocks (` instead of indentation)
• Asterisks for emphasis (* and * for italic and bold)

The code is minified to work as a bookmarklet while maintaining all functionality. It first checks if Turndown is already loaded, and if not, loads it from a CDN before performing the conversion.

Conclusion

This bookmarklet streamlines the process of converting web content to Markdown, saving valuable time for developers, writers, and content creators. Its smart selection features and clean interface make it a handy tool for anyone working with Markdown regularly.

Feel free to modify the code to match your preferred Markdown style or add additional features. The source code is readily available and easy to customize.

Happy converting!