5 ms·

Convert Markdown to PDF only using browser

118 points by realdennis 8y ago

cheeaun 8y ago
Seriously, this is just `window.print()`...
- shakna 8y ago
  You weren't kidding! Inspect->Events->onClick function() { return window.print() } Though the codemirror stuff is probably a bit more work.
  - hombre_fatal 8y ago
    Yeah, the project is basically a React app that implements the plumbing for the editor vs preview panes, file selection, and the drag-n-drop file handler. Nothing wrong with that, but a project named "md2pdf" juxtaposed with onClick={window.print} is unexpected.
    - realdennis 8y ago
      The first problem I want to solve was that convert MD file to PDF. And I found the powerful way was browser print. It allows you zoom rate/choose page range. So, I dig in CSS media query and try to compatible cross browser(Chrome&FF). I made an editor in left side just cause sometimes we want edit some typo or something before convert...haha, codemirror makes a good user experience than textarea.
      - cheeaun 8y ago
        Yeah, that technically works ;) I was kind of expecting that the PDF generation is done with some script like https://github.com/mrrio/jspdf https://github.com/mrrio/jspdf and then rendered with https://github.com/mozilla/pdf.js https://github.com/mozilla/pdf.js :)
      - hnthroaway1926 8y ago
        do you know if there is a way to remove the datetime stamp header that is inserted into the pdf when printing?
        hombre_fatal 8y ago
        Once Chrome's print dialog pops up, you can expand "More settings" and then uncheck "Headers and footers".
        hnthroaway1926 8y ago
        thanks, worth noting that the print dialog does not support that option when using Firefox on Windows
        frosted-flakes 8y ago
        I think you need to open it in Print Preview to change those settings, which is accessible in the main menu (there's not a keyboard shortcut, unfortunately).
      - hanniabu 8y ago
        Small preference would be for the edits on the left side to be saved in local storage for the next visit similar to dillinger.io
- deleted 8y ago
  [deleted]
m3nu 8y ago
I have the same thing as dirty Python script[1]. Handy to send notes or reports to clients as "nice" PDF. One could customize it to support additional markdown features, like footnotes, tables. To run: $ md2pdf some-markdown.md # gives some-markdown.pdf You can also pass a CSS sheet with some custom fonts and colors. (sample included with GIST) $ export MD2PDF_CSS=style.css md2pdf myfile.md 1: https://gist.github.com/m3nu/616c0d59246d0554ed599daeec44e646#file-md2pdf-py https://gist.github.com/m3nu/616c0d59246d0554ed599daeec44e64...
- tverrbjelke 8y ago
  I also prefer local solutions, try e.g. aptitude show python-markdown It might feel cool just maximize use of your browser, but I shy from putting this kind of (possibly confidential) content via internet based solutions/services.
zinkem 8y ago
I've been using the Markdown Reader Chrome extension and using the browser print function to do this kind of conversion. What would be really useful (to me personally) is a tool that renders plantUML/mermaid embedded into markdown to a PDF. I haven't been able to find a simple solution that doesn't require writing code to integrate the libraries together, or rendering the images separately and bringing them into the markdown document (which is tedious).
- asicsp 8y ago
  check out markdeep[1] which allows diagrams (but I don't think it is comprehensive like plantUML/mermaid) [1] https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/
- jokjadk 8y ago
  There is a filter for Pandoc that lets you embed PlantUML. https://github.com/kbonne/pandoc-plantuml-filter https://github.com/kbonne/pandoc-plantuml-filter
asicsp 8y ago
See also markdeep[1] (extension of markdown) and remarkable[2] (desktop app) Personally, I use pandoc and customize using xelatex [3] to generate beautiful pdfs for self publishing [1] https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/ [2] https://remarkableapp.github.io/linux.html https://remarkableapp.github.io/linux.html [3] https://learnbyexample.github.io/tutorial/ebook-generation/customizing-pandoc/ https://learnbyexample.github.io/tutorial/ebook-generation/c...
- bovermyer 8y ago
  Pandoc is definitely the way to go. Very easy to automate, too.
vmware505 8y ago
Visual Studio Code "Markdown PDF" addon is perfect for this type of job. https://github.com/yzane/vscode-markdown-pdf https://github.com/yzane/vscode-markdown-pdf
neatcoder 8y ago
Similar topics are coming up often on HN recently. I think it's time Markdown should be supported natively by browsers. Until then, there are things like: TeXMe (https://github.com/susam/texme https://github.com/susam/texme): This is my personal favorite because it supports the CommonMark standard of Markdown and also LaTeX via MathJax. I like standards so that I know that the Markdown I write (especially nested lists, code within nested lists, etc.) get rendered the same way everywhere. I write some math too, so MathJax support is useful. If you are looking for something where you can just slap together Markdown and LaTeX and turn the document instantly into a paper-like finish, this is a good choice. The output can be saved as PDF or printed too just like you would print any paper. MdMe (https://github.com/susam/mdme https://github.com/susam/mdme): This is pretty much TeXMe without MathJax support. Markdeep (https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/): This is like TeXMe but it supports a lot of features like diagrams, tables, etc. But it comes at the cost of standard conformance. Markdeep does not conform to CommonMark. I don't need these additional features for most of my writing but I care about standard conformance, so I go with TeXMe but if you need these features then Markdeep is a good choice. Comparison of TeXMe vs. Markdeep by the author: https://news.ycombinator.com/item?id=18314175 https://news.ycombinator.com/item?id=18314175
- TuringTest 8y ago
  > I think it's time Markdown should be supported natively by browsers. I'd rather have AsciiDoc become the default lightweight documentation format. Markdown suffers from competing standards regarding extensibility beyond basic formating, whereas AsciiDoc is a quite direct translation of the solid standard Docbook. Extending Markdown to anything more complex than bold, italic or headers requires deciding among a number of competing tools with different syntax and installing them as extensions. AsciiDoc has features as tables, references, images or metadata integrated in the standard, and it has been designed for extensibility, while Markdown was not. There is an advantage of using Markdown over AsciiDoc, which is that it is currently supported by a larger variety of tools. But that advantage is somewhat negated by its different and slightly incompatible flavors. https://asciidoctor.org/docs/asciidoc-vs-markdown/ https://asciidoctor.org/docs/asciidoc-vs-markdown/ https://www.ericholscher.com/blog/2016/mar/15/dont-use-markdown-for-technical-docs/ https://www.ericholscher.com/blog/2016/mar/15/dont-use-markd...
_Codemonkeyism 8y ago
I wish there would be an open source alternative to PrinceXML.
- prepend 8y ago
  Me too. It’s a nice project, but expensive for small projects. I really wish there was just a better alternative to pdf that lets me “print” a single pretty file that has everything a reader needs. My dream is that Microsoft finally buys adobe and becomes a saint by making a full oss pdf implementation that includes a wide variety of language libs. It will cost a lot but further differentiate then from google and amazon similar to buying github and not screwing it up (hopefully).
- akvadrako 8y ago
  I did find this today: https://weasyprint.org/ https://weasyprint.org/ Seems like the closest open source alternative to PrinceXML.
  - _Codemonkeyism 8y ago
    Thanks will take a look, up to now everything else I've tried had subpar print CSS support and created not the best output. Didn't know weasyprint ! [Edit] Tried out Weasyprint, sadly doesn't support a lot of stuff which I need (Javascript, could hack phantomjs, and CSS leader() for TOCs).
DJBunnies 8y ago
I too can "print to PDF."
ChikkaChiChi 8y ago
Just FYI, this is being blocked by Cisco Umbrella

118 points by realdennis 8y ago

cheeaun 8y ago

Seriously, this is just `window.print()`...

shakna 8y ago
You weren't kidding! Inspect->Events->onClick function() { return window.print() } Though the codemirror stuff is probably a bit more work.
- hombre_fatal 8y ago
  Yeah, the project is basically a React app that implements the plumbing for the editor vs preview panes, file selection, and the drag-n-drop file handler. Nothing wrong with that, but a project named "md2pdf" juxtaposed with onClick={window.print} is unexpected.
  - realdennis 8y ago
    The first problem I want to solve was that convert MD file to PDF. And I found the powerful way was browser print. It allows you zoom rate/choose page range. So, I dig in CSS media query and try to compatible cross browser(Chrome&FF). I made an editor in left side just cause sometimes we want edit some typo or something before convert...haha, codemirror makes a good user experience than textarea.
    - cheeaun 8y ago
      Yeah, that technically works ;) I was kind of expecting that the PDF generation is done with some script like https://github.com/mrrio/jspdf https://github.com/mrrio/jspdf and then rendered with https://github.com/mozilla/pdf.js https://github.com/mozilla/pdf.js :)
    - hnthroaway1926 8y ago
      do you know if there is a way to remove the datetime stamp header that is inserted into the pdf when printing?
      - hombre_fatal 8y ago
        Once Chrome's print dialog pops up, you can expand "More settings" and then uncheck "Headers and footers".
        hnthroaway1926 8y ago
        thanks, worth noting that the print dialog does not support that option when using Firefox on Windows
        frosted-flakes 8y ago
        I think you need to open it in Print Preview to change those settings, which is accessible in the main menu (there's not a keyboard shortcut, unfortunately).
    - hanniabu 8y ago
      Small preference would be for the edits on the left side to be saved in local storage for the next visit similar to dillinger.io
deleted 8y ago
[deleted]

m3nu 8y ago

I have the same thing as dirty Python script[1]. Handy to send notes or reports to clients as "nice" PDF. One could customize it to support additional markdown features, like footnotes, tables. To run: $ md2pdf some-markdown.md # gives some-markdown.pdf You can also pass a CSS sheet with some custom fonts and colors. (sample included with GIST) $ export MD2PDF_CSS=style.css md2pdf myfile.md 1: https://gist.github.com/m3nu/616c0d59246d0554ed599daeec44e646#file-md2pdf-py https://gist.github.com/m3nu/616c0d59246d0554ed599daeec44e64...

tverrbjelke 8y ago
I also prefer local solutions, try e.g. aptitude show python-markdown It might feel cool just maximize use of your browser, but I shy from putting this kind of (possibly confidential) content via internet based solutions/services.

zinkem 8y ago

I've been using the Markdown Reader Chrome extension and using the browser print function to do this kind of conversion. What would be really useful (to me personally) is a tool that renders plantUML/mermaid embedded into markdown to a PDF. I haven't been able to find a simple solution that doesn't require writing code to integrate the libraries together, or rendering the images separately and bringing them into the markdown document (which is tedious).

asicsp 8y ago
check out markdeep[1] which allows diagrams (but I don't think it is comprehensive like plantUML/mermaid) [1] https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/
jokjadk 8y ago
There is a filter for Pandoc that lets you embed PlantUML. https://github.com/kbonne/pandoc-plantuml-filter https://github.com/kbonne/pandoc-plantuml-filter

asicsp 8y ago

See also markdeep[1] (extension of markdown) and remarkable[2] (desktop app) Personally, I use pandoc and customize using xelatex [3] to generate beautiful pdfs for self publishing [1] https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/ [2] https://remarkableapp.github.io/linux.html https://remarkableapp.github.io/linux.html [3] https://learnbyexample.github.io/tutorial/ebook-generation/customizing-pandoc/ https://learnbyexample.github.io/tutorial/ebook-generation/c...

bovermyer 8y ago
Pandoc is definitely the way to go. Very easy to automate, too.

vmware505 8y ago

Visual Studio Code "Markdown PDF" addon is perfect for this type of job. https://github.com/yzane/vscode-markdown-pdf https://github.com/yzane/vscode-markdown-pdf

neatcoder 8y ago

Similar topics are coming up often on HN recently. I think it's time Markdown should be supported natively by browsers. Until then, there are things like: TeXMe (https://github.com/susam/texme https://github.com/susam/texme): This is my personal favorite because it supports the CommonMark standard of Markdown and also LaTeX via MathJax. I like standards so that I know that the Markdown I write (especially nested lists, code within nested lists, etc.) get rendered the same way everywhere. I write some math too, so MathJax support is useful. If you are looking for something where you can just slap together Markdown and LaTeX and turn the document instantly into a paper-like finish, this is a good choice. The output can be saved as PDF or printed too just like you would print any paper. MdMe (https://github.com/susam/mdme https://github.com/susam/mdme): This is pretty much TeXMe without MathJax support. Markdeep (https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/): This is like TeXMe but it supports a lot of features like diagrams, tables, etc. But it comes at the cost of standard conformance. Markdeep does not conform to CommonMark. I don't need these additional features for most of my writing but I care about standard conformance, so I go with TeXMe but if you need these features then Markdeep is a good choice. Comparison of TeXMe vs. Markdeep by the author: https://news.ycombinator.com/item?id=18314175 https://news.ycombinator.com/item?id=18314175

TuringTest 8y ago
> I think it's time Markdown should be supported natively by browsers. I'd rather have AsciiDoc become the default lightweight documentation format. Markdown suffers from competing standards regarding extensibility beyond basic formating, whereas AsciiDoc is a quite direct translation of the solid standard Docbook. Extending Markdown to anything more complex than bold, italic or headers requires deciding among a number of competing tools with different syntax and installing them as extensions. AsciiDoc has features as tables, references, images or metadata integrated in the standard, and it has been designed for extensibility, while Markdown was not. There is an advantage of using Markdown over AsciiDoc, which is that it is currently supported by a larger variety of tools. But that advantage is somewhat negated by its different and slightly incompatible flavors. https://asciidoctor.org/docs/asciidoc-vs-markdown/ https://asciidoctor.org/docs/asciidoc-vs-markdown/ https://www.ericholscher.com/blog/2016/mar/15/dont-use-markdown-for-technical-docs/ https://www.ericholscher.com/blog/2016/mar/15/dont-use-markd...

_Codemonkeyism 8y ago

I wish there would be an open source alternative to PrinceXML.

prepend 8y ago
Me too. It’s a nice project, but expensive for small projects. I really wish there was just a better alternative to pdf that lets me “print” a single pretty file that has everything a reader needs. My dream is that Microsoft finally buys adobe and becomes a saint by making a full oss pdf implementation that includes a wide variety of language libs. It will cost a lot but further differentiate then from google and amazon similar to buying github and not screwing it up (hopefully).
akvadrako 8y ago
I did find this today: https://weasyprint.org/ https://weasyprint.org/ Seems like the closest open source alternative to PrinceXML.
- _Codemonkeyism 8y ago
  Thanks will take a look, up to now everything else I've tried had subpar print CSS support and created not the best output. Didn't know weasyprint ! [Edit] Tried out Weasyprint, sadly doesn't support a lot of stuff which I need (Javascript, could hack phantomjs, and CSS leader() for TOCs).

DJBunnies 8y ago

I too can "print to PDF."

ChikkaChiChi 8y ago

Just FYI, this is being blocked by Cisco Umbrella