Bookmarklet to convert HTML selection to Markdown

Since somebody asked in another thread about the possibility to convert parts of a HTML document to Markdown including links etc.: I fiddled around a bit and came up with this bookmarklet:

javascript:(() => {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://unpkg.com/turndown/dist/turndown.js";
script.async = false;
script.defer = false;
document.head.appendChild(script);
script.addEventListener('load', () => {
const sel = window.getSelection();
const range = sel.getRangeAt(0);
const turndownService = new TurndownService();
const dummy = document.createElement('div');
dummy.appendChild(range.cloneContents());
const markdown = turndownService.turndown(dummy.innerHTML);
navigator.clipboard.writeText(markdown); 
})
})()

It takes the currently selected part of a web page, converts it to Markdown (using the turndown library) and copies the result to the clipboard.
This should (!) work in all browsers, not only Safari. And it does not rely on DT’s services, either. It is not overly tested, though.

The obvious disadvantage is the reliance on an external library for the conversion to MD. But hey, why invent the wheel again?

For installing the bookmarklet in Safari: see here. Other browser should work similarly.

1 Like

This doesn’t seem to be working for me in Safari (MBP 2019 running OS 11.2). After lots of attempts I’ve copied stuff just twice, and both returned only plain text. The address has the above Javascript but I’m probably missing something obvious.

Can you give me an URL where it doesn’t work?

https://www.psephizo.com/reviews/did-christianity-make-the-west/

I assume I need to select text and then click the bookmarklet as I can’t drag a selection onto it.

I open the URL in Safari and select from “Savas…” to “…here is not”. Then I click on the Bookmarklet (yes, no drag and drop – it’s a bookmarklet, not a drop site). When I then past the clipboard into an editor, I get

**Savvas Costi** **writes**: It’s been almost a year and a half since historian Tom Holland 
released his book, [Dominion; The Making of the Western Mind](https://www.amazon.co.uk/Holland-Dominion-Making-Western-Paperback/dp/B08KF5NJQN/). Since then, there 
seems to have been something of an influx of interviews and articles relating to the enduring influence of Christianity, or at least the need for it in the modern world. 
For those  still unfamiliar, some excellent reviews have already been written by [Joel Virgo](https://thinktheology.co.uk/blog/article/how_christianity_made_the_western_mind_joel_virgo_reviews_tom_holland), [Barney Zwartz](https://www.solas-cpc.org/book-dominion-by-tom-holland/) and [Tim Keller](https://www.thegospelcoalition.org/reviews/dominion-christian-revolution-tom-holland/). What I write here is not i

(I added some newlines for readability, the original text is all in one long line). That looks ok to me.

However, there may well be sites where this codes does not work. E.g., Github prevents the injection of JavaScript the bookmarklet rellies on. So that’s a no go for the time being.

Hmm. It doesn’t work for me. As soon as I click the bookmarklet, the selection is removed and nothing is captured.

Which browser are you using?

Safari (14.0.3) on OS 11.2.

I tried it again myself and saw that sometimes it does not work because Safari reports no range for the selection. I have no idea why that is the case. What I do see though is that the website already has problems with their own setup:Safari throws three errors when it is loding that page:

[Error] Origin https://www.psephizo.com is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ due to access control checks.
[Error] Failed to load resource: Origin https://www.psephizo.com is not allowed by Access-Control-Allow-Origin. (rpc, line 0)

If that is related to the script failing or not, I don’t know.

1 Like