tanabe
add divider-resizer,load MD, save MD, Print or PDF, Copy Code, Flow Chart
load MD and Save MD
divider-resizer
Print or PDF
note: must use http server, using file:// cannot pass CORS
Copy Code
Mermaid Flow Chart
this is exactly what i was looking for when I clicked the github link. i hope it gets approved soon
@amlan-sw @AtikoSpeed @squishfunk @tanabe Hope you or others find this useful:
I finished writing printButton.js, which can be included in a fork or static local copy via <script src=...> , OR as a Bookmarklet in any web browser (add to your Favorites bar).
javascript:void function(){void function(){"use strict";const a="editor",b=document,c=a=>(a??"").replace(/[\u200d]/g,"").replace(/\s+/g," ").trim(),d=a=>b.getElementById(a),e=(a,c)=>[...(c||b).querySelectorAll(a)],f=(a,c)=>Object.assign(b.createElement(a||"div"),c),g=a=>a?.remove(),h=setTimeout,i=40,j=window,k=b=>q?.getValue()??e(".sticky-widget-lines,.view-line",d(a)).map(a=>a.style.top.padStart(9,0)+a.innerText).sort().map(a=>a.slice(9)).join("\n"),l=a=>{const b=k().split("\n").map(a=>c(a)),d=(b.find(a=>(a.match(/^#\s+(.+)/)||[])[1])??b.find(a=>(a.match(/^##\s+(.+)/)||[])[1])??b.filter(a=>a.length)[0]??"").replace(/^##?\s+/,"");return d?.length?d:a},m=(a="print-button")=>{if(d(a))return;const j="print-"+(location.href.match(/(\/([^/]+))+/)?.[1]??"").replace(/[^a-z]+/gi,""),k=b.title,m=d("sync-button").insertAdjacentElement("beforeBegin",f(0,{id:a,innerHTML:"<style>.extra-button { margin-left: 16px; } </style><a href=\"#\">Print</a>",title:"Print (Save as PDF)",className:"extra-button"}));return m.addEventListener("click",a=>{a.preventDefault();try{let a,m,n;g(d(j));const o=prompt("Printing: what title?",l(b.title)),p=c(o),q=!p.length,r=q?k:p;if(null==o)return null;q&&(b.title=r),a=b.head.cloneNode(!0),e("script",a).forEach(g),a.appendChild(f("style",{textContent:"@media print { body { height: auto !important; } }"}));const s="<!DOCTYPE html><html lang='en'><head>"+(a.innerHTML||"<meta charset='UTF-8'><title>printable</title>")+"</head><body>"+(d("output").outerHTML||"")+"<style></style></body></html>",t=()=>{h(()=>{n.focus(),h(()=>{n.print()},i)},i),n.document.title=r};return m=f("iframe",{id:j,title:j}),m.srcdoc=s,m.style.display="none",b.body.appendChild(m),n=m.contentWindow,m.onload=t,s}catch(a){return a.stack}}),m},n=()=>{o=d("container"),p=d("preview"),o&&p?(q=p._?.editor??j.ace?.edit(a),m()):location="https://darrensem.github.io/markdown/"};let o,p,q;void(/loading/.test(b.readyState)?b.addEventListener("DOMContentLoaded",n):h(n,i))}()}();
By adding as a Bookmarklet, you can then click it whenever you need to add a [Print] button (while waiting for this repo to add this feature "officially", which hopefully will use <IFRAME> and not window.open)...
- Create a new Favorite in your web browser with a helpful name (especially if using on Mobile, since you must type in Address Bar to launch)
- Edit the Favorite, paste into its Target URL the code above or found here: printButton.Bookmarklet.js (1980 characters) [*]
- Save the Favorite and try clicking it when you are visiting https://markdownlivepreview.com/
- Learn what you need from the non-minified source code: https://github.com/DarrenSem/markdown/blob/master/static/printButton.js
[*] If you prefer to open in a separate window/tab, there is a Bookmarklet for that too: printButton.WINDOW_instead_of_IFRAME.js (2002 characters)
