Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

11–20 of 92 posts

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

#11

Post by XaspR8d »

tedmiston wrote: post #7
mplewis wrote: post #5

Earlier quoted context omitted.

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

Just curious why you'd want to use code screenshots vs text in a presentation. Did it have to do with missing fonts or something like that?

Not OP, but syntax highlighting and other niceties are probably going to disappear within most presentation software.

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

#12

Post by mplewis »

mrunkel wrote: post #8

Hmm. I would just usually screenshot the code snippet in my IDE. Seems like an easier solution. However, congrats on assembling your "Lovecraftian amalgamation of software." :)

Thanks! I'm not super happy with the big pile of JS I now own, but this did save me a bunch of time I used to spend setting up Atom, picking the right colors, zooming in, loading all the text files...

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

#13

Post by mplewis »

jonny_eh wrote: post #9

Why "Show HN" but not publish to NPM? Seems neat, just publish it. Also, ever try this technique? https://gist.github.com/jimbojsb/1630790 I've used it with success before.

Thank you! I don't want to publish it yet because I want to clean it up a lot first – ditch the dev server, clean up the build pipeline, add some actual CLI arguments, etc.

I'll check out that app on brew, it looks like a cool approach. Thanks!

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

#14

Post by mplewis »

XaspR8d wrote: post #11
tedmiston wrote: post #7

Earlier quoted context omitted.

Just curious why you'd want to use code screenshots vs text in a presentation. Did it have to do with missing fonts or something like that?

Not OP, but syntax highlighting and other niceties are probably going to disappear within most presentation software.

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

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

#17

Post by juandazapata »

Nice work, I certainly think this is a nice pet project where the author learned a ton, however this looks too convoluted for my personal taste.

In my case, I use an Alfred workflow that formats the code snippet and then I can just paste the formatted code into Keynote/Powerpoint. It supports several color themes and it's super fast https://github.com/importre/alfred-hl

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

#18

Post by imhoguy »

mplewis wrote: post #6
justin--sane wrote: post #2

Nice work. But I'm not looking forward to trying to select text only to drag an image

Thanks! I built this for Keynote presentations specifically. I wanted to be able to write code samples as snippet files, then generate a batch of images I can drop into my presentations. If you're posting code on a website, you're right – you should prefer and prism.js or highlight.js :)

I like the idea too, but :) would be Chrome Headless capable of producing SVG somehow? Aside usability I think about indexability/SEO aspect of the material. SVG with texts would be excellent for on-line presentations without lecturer, PDFs, books and maybe even partially editable.

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

#19

Post by tzury »

If I want to scratch my left hear, I would use my left hand. Why in the world I'll do it with my right foot?

What happened to the simple screenshot?

This seems to be the flow:

    +----------+        +----------+          +-------------+
    |          |        |          |          |             |
    |   NodeJS +------->+   POI    +--------->+ Puppeteer   +----+
    |          |        |          |          |             |    |
    +----------+        +----------+          +-------------+    |
                                                                 |
                                                                 |
    +----------+        +----------+          +-------------+    |
    |          |        |          |          |             |    |
    |   NodeJS
* drawn with http://asciiflow.com/
Post reply on HN