added a print/save as pdf option

[seandoc66]

Thanks for this handy little app! I also needed the option to print out the formatted version, so I added this functionality using CSS to open up a new window with only the contents of the right-hand pane. Merge if you think other people will find this useful and you like the way I did it. There are some other ways to do it that Claude suggested. I chose option number two.

Options for Implementation:

1. CSS @media print approach (Simplest for Print)

• Hide the left pane using CSS when printing
• Pros: No additional libraries, works with browser's native print
• Cons: User could still manually select "Save as PDF" which might not format optimally

2. Create a temporary print window (Best balance)

• Open a new window with only the preview content
• Use browser's print function on that window
• Pros: Clean, no libraries needed, works for both Print and PDF
• Cons: Popup blockers might interfere

3. Use html2pdf.js library (Best for PDF control)

• Client-side PDF generation from HTML
• Pros: Full control over PDF output, page breaks, formatting
• Cons: Adds ~300KB dependency

4. Use jsPDF + html2canvas (More complex)

• Screenshots the preview and converts to PDF
• Pros: Exact visual representation
• Cons: Larger dependencies, might have issues with long content

[PaulineMauryL]

This feature would be really really useful

[DarrenSem]

Thanks for this handy little app! I also needed the option to print out the formatted version, so I added this functionality using CSS to open up a new window with only the contents of the right-hand pane. Merge if you think other people will find this useful and you like the way I did it. There are some other ways to do it that Claude suggested. I chose option number two.

Options for Implementation:

1. CSS @media print approach (Simplest for Print)

• Hide the left pane using CSS when printing
• Pros: No additional libraries, works with browser's native print
• Cons: User could still manually select "Save as PDF" which might not format optimally

2. Create a temporary print window (Best balance)

• Open a new window with only the preview content
• Use browser's print function on that window
• Pros: Clean, no libraries needed, works for both Print and PDF
• Cons: Popup blockers might interfere

3. Use html2pdf.js library (Best for PDF control)

• Client-side PDF generation from HTML
• Pros: Full control over PDF output, page breaks, formatting
• Cons: Adds ~300KB dependency

4. Use jsPDF + html2canvas (More complex)

• Screenshots the preview and converts to PDF
• Pros: Exact visual representation
• Cons: Larger dependencies, might have issues with long content

@seandoc66
2b. An alternative instead of window.open(...) and having popup blocker concerns, you could set childframe = document.createElement("iframe") and populate its .srcdoc with just the HTML head/body that you want to see in the "new page" then trigger childframe.print(). An approach I have been trying out this week, not quite 100% yet but proof of concept works ok.

[DarrenSem]

Thanks for this handy little app! I also needed the option to print out the formatted version, so I added this functionality using CSS to open up a new window with only the contents of the right-hand pane. Merge if you think other people will find this useful and you like the way I did it. There are some other ways to do it that Claude suggested. I chose option number two.
Options for Implementation:
...
2b. An alternative instead of window.open(...) and having popup blocker concerns, you could set childframe = document.createElement("iframe") and populate its .srcdoc with just the HTML head/body that you want to see in the "new page" then trigger childframe.print(). An approach I have been trying out this week, not quite 100% yet but proof of concept works ok.

@seandoc66
@PaulineMauryL
@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)