Skip to content

Comments

add divider-resizer,load MD, save MD, Print or PDF, Copy Code, Flow Chart#62

Open
amlan-sw wants to merge 6 commits intotanabe:mainfrom
amlan-sw:main
Open

add divider-resizer,load MD, save MD, Print or PDF, Copy Code, Flow Chart#62
amlan-sw wants to merge 6 commits intotanabe:mainfrom
amlan-sw:main

Conversation

@amlan-sw
Copy link

@amlan-sw amlan-sw commented Sep 26, 2024

load MD and Save MD

image

divider-resizer

image

Print or PDF

note: must use http server, using file:// cannot pass CORS

image

Copy Code

image

Mermaid Flow Chart

image

@amlan-sw amlan-sw mentioned this pull request Sep 26, 2024
@amlan-sw amlan-sw changed the title add divider resizer and buttons: load MD, save MD, Print or PDF add divider-resizer,load MD, save MD, Print or PDF, Copy Code, Flow Chart Oct 6, 2024
@AtikoSpeed
Copy link

this is exactly what i was looking for when I clicked the github link. i hope it gets approved soon

@AtikoSpeed
Copy link

@tanabe please approve

@squishfunk
Copy link

Yeah, please approve that

@DarrenSem
Copy link

DarrenSem commented Sep 13, 2025

@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)...

  1. 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)
  2. Edit the Favorite, paste into its Target URL the code above or found here: printButton.Bookmarklet.js (1980 characters) [*]
  3. Save the Favorite and try clicking it when you are visiting https://markdownlivepreview.com/
  4. 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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants