Action

HTML > Markdown

Posted by agiletortoise, Last update 5 months 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.

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.