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

51–60 of 92 posts

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

#51

Post by mplewis »

mcphage wrote: post #36
jlgosse wrote: post #27

Earlier quoted context omitted.

Why not just do a screenshot of the code from Atom?

That doesn't scale well beyond doing a handful of them, I would think.

Exactly, and to get the screenshot exactly as I want takes a couple minutes of setup – pick a theme, pick a font size, resize window – plus a few more if I have to stitch scrolled pages together.

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

#52

Post by abritinthebay »

tzury wrote: post #19

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…

Automation, I don't think anyone is suggesting you should do this by hand.

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

#56

Post by dclowd9901 »

tzury wrote: post #19

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…

I can't tell if you're trying to be funny with your usage of asciiflow to render something you could've rendered like this: NodeJS -> POI -> Puppeteer -> Puppeteer -> POI -> NodeJS

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

#58

Post by orf »

simcop2387 wrote: post #40
coliveira wrote: post #22

Earlier quoted context omitted.

The next step is to start a virtual machine to run NodeJS to "improve" on this workflow.

Nah, this is perfect for containers. You could use kubernetes to manage it all.

For true webscale generation use AWS autoscaling. Render tens of screenshots in a matter of minutes!

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

#59

Post by thinbeige »

I like how people come up with new uses cases for headless Chrome.

But for his use case ('presentation') there are tons of presentation libs/franeworks in HTML/JS/CSS which support code embeddings with syntax highlighting.

Same quality but much easier workflow since code stays editable.

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

#60

Post by adambrenecki »

mplewis wrote: post #48
cjbillington wrote: post #26

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 the…

If you're copying code into a Keynote presentation, you can use Pygments' RTF output mode, copy it to the clipboard, and just paste it into a text box in Keynote. That way, because it's actual text, it's smooth regardless of output resolution. Here's an example I just pulled from my shell history:

    pygmentize -f rtf -O "fontface=Fira Code,fontsize=26" -l prolog familyinteract.pl | pbcopy
(That was for pasting code into Pages; for Keynote you'll probably want a bigger font size.)
Post reply on HN