# Bookmarklet to convert HTML selection to Markdown

**URL:** <https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170>\
**Category:** Tips\
**Tags:** automation\
**Created:** [February 18, 2021, 11:43am UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170 "2021-02-18T11:43:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [February 18, 2021, 11:43am UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/1 "2021-02-18T11:43:45Z")

</div>

Since somebody asked in [another thread](https://discourse.devontechnologies.com/t/smart-er-paste-html-to-md/62067) 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:

```auto
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](https://www.cultofmac.com/500532/how-to-add-bookmarklet-mobile-iphone-safari/). Other browser should work similarly.

---

<div class="post-metadata">

**Author:** ![tonywatkins](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@tonywatkins](https://discourse.devontechnologies.com/u/tonywatkins)\
**Post date:** [February 19, 2021, 3:19pm UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/2 "2021-02-19T15:19:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [February 19, 2021, 3:33pm UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/3 "2021-02-19T15:33:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tonywatkins](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@tonywatkins](https://discourse.devontechnologies.com/u/tonywatkins)\
**Post date:** [February 19, 2021, 4:57pm UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/4 "2021-02-19T16:57:38Z")

</div>

[https://www.psephizo.com/reviews/did-christianity-make-the-west/](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.

---

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [February 19, 2021, 7:42pm UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/5 "2021-02-19T19:42:57Z")

</div>

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

```auto
**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.

---

<div class="post-metadata">

**Author:** ![tonywatkins](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@tonywatkins](https://discourse.devontechnologies.com/u/tonywatkins)\
**Post date:** [February 22, 2021, 10:48am UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/6 "2021-02-22T10:48:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [February 22, 2021, 11:01am UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/7 "2021-02-22T11:01:03Z")

</div>

Which browser are you using?

---

<div class="post-metadata">

**Author:** ![tonywatkins](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/t/54ee81/32.png) [@tonywatkins](https://discourse.devontechnologies.com/u/tonywatkins)\
**Post date:** [February 22, 2021, 11:14am UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/8 "2021-02-22T11:14:44Z")

</div>

Safari (14.0.3) on OS 11.2.

---

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [February 22, 2021, 12:12pm UTC](https://discourse.devontechnologies.com/t/bookmarklet-to-convert-html-selection-to-markdown/62170/9 "2021-02-22T12:12:13Z")

</div>

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:

```auto
[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.
