Live data from Hacker News

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

github.com

81–90 of 92 posts

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

#81
This kind of projects are always interesting, although not for the problem they try to solve (I ain't downloading >500mb of deps just to take a screenshot of code) but for discovering what are the trendiest technologies right now.

Thanks to this I've learnt about poi, yarn, the Fira Code font...

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

#82

Vim can do this 1. Open your script/code in vim editor 2. Enable syntax & set the required color scheme :syntax on :colorscheme darkblue 3. Print the file in PS file format :hardcopy >/tmp/filename.ps 4. Convert the PS file to PDF format $ ps2pdf /tmp/filename.ps 5. Now you can open filename.pdf

You can also do :TOhtml, then open the html file with your browser and print to pdf. A bit simpler imo.

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

#83

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.

Couldn't you just write a script that does the pygmentize, and alias a git command to it?

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

#84
post #81

This kind of projects are always interesting, although not for the problem they try to solve (I ain't downloading >500mb of deps just to take a screenshot of code) but for discovering what are the trendiest technologies right now. Thanks to this I've learnt about poi, yarn, the Fira Code font...

I've been using Fira Code for a while. I think it's beautiful, but my colleagues sometimes wonder if I'm really showing them real code right now, because the ligatures look like it was rendered for display.

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

#85
post #78

An over engineered solution for what is super easy with Powerpoint and Notepad++.

Yeah, I was thinking the same. His potential solutions section is missing:

* Insert in Text-Editor or IDE with Syntax highlighting * Take a screengrab

I mean it's still nice in terms of being able to script the generation if you have code that updates frequently and you want to keep the pictures current.

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

#86
post #18
post #6

Earlier quoted context omitted.

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.

I agree, that would also benefit me enough to install a JS monster on my computer, if I could generate SVG or PDF from highlighted code. My current solution being taking Screenpresso screenshots.

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

#88

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.

You assume he uses HTML/JS/CSS for presentation. What if it's Keynote/Powerpoint?

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

#89
post #31

Interesting idea! I'm not sure about the implementation though. I mean couldn't you just skip the whole Poi/live-reloading steps and just output a html file with some and tags? Why bother with the live-reloading/poi complexity?

Batch-shotting without reloading chrome each time?
Post reply on HN