Live data from Hacker News

Show HN: Generate high-res images of code samples with Chrome Headless

github.com

41–50 of 92 posts

Re: Show HN: Generate high-res images of code samples with Chrome Headless

#41
post #5

Wouldn't it be better as a PDF so that it can be selected? But somehow still retain the color / formatting.

I built this to generate PNGs to drop into a Keynote presentation, so PDFs don't quite work for my use case. It seems like it should be pretty easy to print a PDF from Puppeteer though – they expose a #pdf method. https://github.com/GoogleChrome/puppeteer/blob/master/docs/a...

You can embed PDFs in Keynote presentations.

Re: Show HN: Generate high-res images of code samples with Chrome Headless

#42

Anyone knows a tool which can help us draw simple diagrams like the one that was mentioned in the README?? https://github.com/mplewis/src2png/blob/master/docs/foreach_...

`mscgen` [1] was a popular one back in the day. I think `graphviz` can do it too. Since sequence diagrams are part of UML, most UML tools can do those. [1] https://en.wikipedia.org/wiki/MscGen

`mscgen' is still my go-to tool for message sequence charts

Re: Show HN: Generate high-res images of code samples with Chrome Headless

#44

What's wrong with pygments? I've been using it to get highlighted code as latex, html, whatever, since forever. I'm all for reinventing deficient wheels, but is there anything wrong with this? pygmentize -f png -l python -o test.png test.py Spinning up a browser for it seems like an odd choice. At least the author acknowledges that.

The interesting bit here would be to tie pygmentize into git. I want to be able to generate all the code samples for a deck in one go even as I make changes to the underlying files. At some point this breaks down but managing line numbers for simple changes shouldn't be required.

Re: Show HN: Generate high-res images of code samples with Chrome Headless

#45
post #21
post #14

Earlier quoted context omitted.

Yep – I can't copy my code out of Atom and keep its highlighting in Keynote, unfortunately.

sorry for the minirant This is something I find really frustrating in computing. We can do and are constantly doing such awesome and incredible things with computers. But at the same time transferring (copy-pasting) text from one application to another remains a challenge. And a reasonable solution for that is to bring in the 600lb gorilla that is a modern web browser to render fixed-width text into a bitmap so that…

Clipboards support storing different content for different MIME types at the same time. Atom would have to put text/html (or some other colored markup) in addition to text/plain into the clipboard and then Keynote would have to know what to insert. The infrastructure for interoperability is there, the endpoints just need to actually support it.

EDIT: Apparently, the problem is (or was in 2014) that Keynote doesn't support HTML and Chrome (Atom is Electron-based, right?) doesn't support RTF. Well worth a read: https://apple.stackexchange.com/a/124167

Re: Show HN: Generate high-res images of code samples with Chrome Headless

#46
post #21
post #14

Earlier quoted context omitted.

Yep – I can't copy my code out of Atom and keep its highlighting in Keynote, unfortunately.

sorry for the minirant This is something I find really frustrating in computing. We can do and are constantly doing such awesome and incredible things with computers. But at the same time transferring (copy-pasting) text from one application to another remains a challenge. And a reasonable solution for that is to bring in the 600lb gorilla that is a modern web browser to render fixed-width text into a bitmap so that…

There is a simple solution for that, and it exists on Android.

On Android all text formatting is compatible between apps nicely, and can easily be copied between apps.

Re: Show HN: Generate high-res images of code samples with Chrome Headless

#48

What's wrong with pygments? I've been using it to get highlighted code as latex, html, whatever, since forever. I'm all for reinventing deficient wheels, but is there anything wrong with this? pygmentize -f png -l python -o test.png test.py Spinning up a browser for it seems like an odd choice. At least the author acknowledges that.

Hey, thanks for the suggestion. I've used Pygments in the past and didn't even think to check if it had a PNG output mode.

Here's an example of Pygments C++ output: http://imgur.com/a/7TbMb

And the same file through Prism.js + Puppeteer: https://github.com/mplewis/src2png/blob/master/docs/arduino....

Pygments does a great job of generating detailed PNGs. The default settings aren't quite what I'm looking for, but they look like they could be tweaked to increase the resolution and change the color scheme.

I'm embedding my examples in a Keynote deck, so I'm picky about font family, size, resolution, etc. I bet I could get similar results by writing a custom script for Pygments. Thanks for sharing!

Post reply on HN