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

21–30 of 92 posts

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

#21

Post by zokier »

mplewis wrote: post #14
XaspR8d wrote: post #11

Earlier quoted context omitted.

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.

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 it can be embedded into a presentation. It just feels so wrong, like the whole field is actually rotten inside under the shiny surface, while the state of the art blazes forwards thousand miles away from the real world. I, as a member of this community, feel utterly powerless to actually make the situation noticeably better, partly because of so much relies on interoperability, and partly because of the massive inertia that modern software carries.

I want out.

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

#22

Post by coliveira »

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…

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

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

#23

Post by mplewis »

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 wanted to automate a lot of screenshots of highlighted code at once, so I wrote a script to take input files and create output files. This was the first workflow that worked for me, so I went with it.

In the future I'd like to simplify the workflow a lot, including cutting out the dev server.

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

#25

Post by hk__2 »

sago wrote: post #10
rposborne wrote: post #4

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

My workflow: One time setup $ python -m venv ve $ source ve/bin/activate $ pip install pygments WeasyPrint Then $ pygmentize -f html src.py | weasyprint - out.pdf Both pygmentize and weasyprint have many options to play with. I find a set and create a shell script. This also does pngs, etc: $ pygmentize -f html src.py | weasyprint - out.png

Can’t you it directly using Pygments’ ImageFormatter?

http://pygments.org/docs/formatters/#ImageFormatter

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

#26

Post by cjbillington »

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.

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

#27

Post by jlgosse »

mplewis wrote: post #14
XaspR8d wrote: post #11

Earlier quoted context omitted.

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.

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

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

#28

Post by aardvark179 »

juandazapata wrote: post #17

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

There's also highlight which is available in most Linux distributions and via homebrew for OSX and can output in RTF and a host of other formats. piping it's output to pbcopy will even put that rtf on the OSX clipboard.

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

#30

Post by sago »

hk__2 wrote: post #25
sago wrote: post #10

Earlier quoted context omitted.

My workflow: One time setup $ python -m venv ve $ source ve/bin/activate $ pip install pygments WeasyPrint Then $ pygmentize -f html src.py | weasyprint - out.pdf Both pygmentize and weasyprint have many options to play with. I find a set and create a shell script. This also does pngs, etc: $ pygmentize -f html src.py | weasyprint - out.png

Can’t you it directly using Pygments’ ImageFormatter? http://pygments.org/docs/formatters/#ImageFormatter

Apparently so! I don't generate images myself, so i didn't know.

    $ pygmentize -o out.png src.py
Neat.
Post reply on HN