Getting Markdown as RTF to Slack, Teams, Confluence

06 Sep 2023

I’ve had a want and a need to get the rendered output of a Markdown preview copied to the clipboard so that it can directly be used in most places, such as Slack, Confluence, Teams and email. Some of thsoe service support Markdown out of the box (albeit not fully) and some don’t support it at all. I’ve been circumventing this by manually highlighting and copying the text, but this gets quite annoying and is error prone.

Luckily I have a writing app that I develop and control, so adding features such as this is quite easy to do. I’ve been using Marked.js to render the preview and used the Clipboard API to automatically copy the rendered output to the clipboard.

Using Marked.js to render a rich text preview of Markdown:

const preview = document.getElementById("exampleId");

const renderMarkdown = (text) => {
  preview.innerHTML = marked.parse(text, {
    breaks: true,
    gfm: true,
  });
};

Copying the rendered HTML output to clipboard:

const copyElementToClipboard = (element) => {
  navigator.clipboard.write([
    new ClipboardItem({
      "text/plain": new Blob([element.innerText], { type: "text/plain" }),
      "text/html": new Blob([element.innerHTML], { type: "text/html" }),
    }),
  ]);
};

copyElementToClipboard(preview);

Now the clipboard will contain the rich text formatted contents of the preview with no styling of the elements, so the default style of the place you’re pasting the content will be used.

Edit: I’ve made a simple web app with the MD to RTF functionality: markdown-to-rtf

Links