HTML > Markdown | Drafts Directory

Action

Posted by agiletortoise, Last update over 4 years ago

Take the HTML content of a draft and convert it to Markdown using the Turndown JavaScript library.

Displays the generated Markdown in a preview, and offers options to copy to the clipboard, replace the content of the current draft, or create a new draft with the Markdown.

Tested

Trusted member

Install

Steps

htmlpreview

<!DOCTYPE html>
<html dir="auto">

<head>
  <title>[[title]]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    @charset "utf-8";

    :root {
      --main-bg-color: white;
      --main-color: black;
      --alternate-bg-color: #efefef;
      --alternate-color: #222222;
      --main-border-color: #BBBBBB;
      --link-color: #627EC9;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --main-bg-color: #222222;
        --main-color: #eeeeee;
        --alternate-bg-color: #444444;
        --alternate-color: #cccccc;
        --main-border-color: #AAAAAA;
          --link-color: #627EC9;
      }
    }

    html {
      font-size: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
      line-height: 1.4em;
      height: 100%;
    }

    body {
      margin: 0;
      padding: 1em;
      background-color: var(--main-bg-color);
      color: var(--main-color);
      height: 100%;
    }

    @media (max-device-width: 480px) {}

    @media (min-device-width: 481px) {
      body {
        margin: auto;
        max-width: 600px;
      }
    }

    blockquote {
      font-style: italic;
      margin: 1.5em 2em;
      padding: 1em;
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
    }

    a {
      color: var(--link-color);
    }

    h4 {
    	margin: .25em 0;
    	padding: 0;
    }

    img {
      max-width: 90%;
    }
    
	button {
		color: #fff !important;
		text-transform: uppercase;
		text-decoration: none;
		background: var(--link-color);
		font-size: .9em;
		padding: .5em 1em;
		border-radius: 8px;
		display: inline-block;
		border: none;
		transition: all 0.4s ease 0s;
	}
	button:hover {
		letter-spacing: 1px;
		-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
		transition: all 0.4s ease 0s;
	}
        button.cancel {
             background-color:#bbbbbb;
        }
  </style>

  <script src="https://unpkg.com/turndown/dist/turndown.js"></script>

</head>

<body>
<div id="content" style="display:none;">
	[[draft]]
</div>

<div id="result-div" style="margin: auto; width: 95%; height: 80%;">
<h4>Convert HTML to Markdown</h4>
<p>HTML from the current draft has been converted to Markdown, previewed below.</p>
<p style="text-align: center;">
<button onclick="doCommand('copy'); return false;">Copy</button>
<button onclick="doCommand('replace'); return false;">Replace</button>
<button onclick="doCommand('new'); return false;"">New Draft</button>
<button class="cancel" onclick="Drafts.cancel(); return false;"">Cancel</button>
</p>
	<div><pre id="result" style="white-space: normal;padding: 1em;border: 1px solid #ddd;"></pre></div>
</div>

<script>
window.onload = (e) => {
	const turndownService = new TurndownService({headingStyle:'atx'});
      turndownService.remove("script");
      turndownService.remove("style");
	let markdown = turndownService.turndown(document.getElementById('content'));
	let result = document.getElementById('result');
	result.innerText = markdown;
	Drafts.send("markdown", markdown);
}

function doCommand(cmd) {
	Drafts.send("command", cmd);
	Drafts.continue();
}
</script>
</div>
</body>

</html>

script

let f = () => {
	let cmd = context.previewValues["command"];
	let markdown = context.previewValues["markdown"];
	
	if (!cmd) { return; }
	if (!markdown || markdown.length == 0) { return; }
	
	if (cmd == "copy") {
		app.setClipboard(markdown);
	}
	else if (cmd == "replace") {
		draft.content = markdown;
		draft.update();
	}
	else if (cmd == "new") {
		let d = new Draft();
		d.content = markdown;
		d.update();
		editor.load(d);
	}
}

f();

Options

After Success Default

Notification Info

Log Level Info

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Default
Notification	Info
Log Level	Info