Skip to content

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

Open
amlan-sw wants to merge 6 commits into
tanabe: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 into
tanabe:mainfrom
amlan-sw:main

Conversation

@amlan-sw

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

Copy link
Copy Markdown

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
Copy Markdown

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

@AtikoSpeed

Copy link
Copy Markdown

@tanabe please approve

@squishfunk

Copy link
Copy Markdown

Yeah, please approve that

@DarrenSem

DarrenSem commented Sep 13, 2025

Copy link
Copy Markdown

@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