11 ms·
Show HN: Generate high-res images of code samples with Chrome Headless
- justin--sane 9y agoNice work. But I'm not looking forward to trying to select text only to drag an image
- theaustinseven 9y agoThis would be nice, however, if you were making a printed document like a book.
- mplewis 9y agoThanks! 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 <pre><code> and prism.js or highlight.js :)
- imhoguy 9y agoI 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.
- carlmr 9y agoI 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.
- justin--sane 9y agoMy first thought was publication ready pseudo code or code snippets for posters
- rposborne 9y agoWouldn't it be better as a PDF so that it can be selected? But somehow still retain the color / formatting.
- mplewis 9y agoI 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/api.md#pagepdfoptions https://github.com/GoogleChrome/puppeteer/blob/master/docs/a...
- tedmiston 9y agoJust 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?
- XaspR8d 9y agoNot OP, but syntax highlighting and other niceties are probably going to disappear within most presentation software.
- mplewis 9y agoYep – I can't copy my code out of Atom and keep its highlighting in Keynote, unfortunately.
- zokier 9y agosorry 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.
- mrunkel 9y agoHmm. 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." :)
- mplewis 9y agoThanks! 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...
- jonny_eh 9y agoWhy "Show HN" but not publish to NPM? Seems neat, just publish it. Also, ever try this technique? https://gist.github.com/jimbojsb/1630790 https://gist.github.com/jimbojsb/1630790 I've used it with success before.
- mplewis 9y agoThank 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!
- hamandcheese 9y agoPublish then iterate!
- franciscop 9y agoYou can just publish an 0.1, 0.2, etc. Then when you are ready just publish a 1.0 version.
- VeejayRampay 9y agoYou might want to check sharp to remove the imagemagick dependency, I'm pretty sure sharp supports edge trimming in one way or another. Great project!
- mplewis 9y agoThanks! I will check out sharp.
- juandazapata 9y agoNice 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 https://github.com/importre/alfred-hl
- aardvark179 9y agoThere'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.
- tzury 9y agoIf 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 <--------+ POI <----------+ Puppeteer +<---+ | | | | | | +----------+ +----------+ +-------------+ * drawn with http://asciiflow.com/ http://asciiflow.com/
- coliveira 9y agoThe next step is to start a virtual machine to run NodeJS to "improve" on this workflow.
- simcop2387 9y agoNah, this is perfect for containers. You could use kubernetes to manage it all.
- orf 9y agoFor true webscale generation use AWS autoscaling. Render tens of screenshots in a matter of minutes!
- omribahumi 9y agoIt's all serverless now
- mplewis 9y agoI 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.
- agbell 9y agoI would like a way to generate a syntax highlighted pdf from either a git repo or a PR, for printing purposes. This seems like it could be adapted in that direction.
- mplewis 9y agoDefinitely – Puppeteer has a method to generate PDFs.
- cjbillington 9y agoWhat'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.
- sago 9y ago100% agreed. Just fwiw, apparently (i.e., I discovered in the last 10 mins) pygmentize detects file extensions, so $ pygmentize -o test.png test.py is equivalent.
- iandanforth 9y agoThe 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.
- carlmr 9y agoCouldn't you just write a script that does the pygmentize, and alias a git command to it?
- mplewis 9y agoHey, 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 http://imgur.com/a/7TbMb And the same file through Prism.js + Puppeteer: https://github.com/mplewis/src2png/blob/master/docs/arduino.cpp.png 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!
- vijaybritto 9y agoAnyone 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_seq_diag.svg https://github.com/mplewis/src2png/blob/master/docs/foreach_...
- wyldfire 9y ago`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 https://en.wikipedia.org/wiki/MscGen
- timvdalen 9y ago`mscgen' is still my go-to tool for message sequence charts
- alschwalm 9y agoI tend to like https://www.draw.io/ https://www.draw.io/ for that sort of thing (there is a chrome app if you want to run offline).
- ythn 9y agoLucidChart (https://www.lucidchart.com/ https://www.lucidchart.com/) is better than draw.io IMO
- ygra 9y agoLooks like https://www.websequencediagrams.com/ https://www.websequencediagrams.com/
- mplewis 9y agoClose! I started with that tool, but moved to the FOSS version: https://bramp.github.io/js-sequence-diagrams/ https://bramp.github.io/js-sequence-diagrams/
- orf 9y agoInteresting 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 <script> and <style> tags? Why bother with the live-reloading/poi complexity?
- wattengard 9y agoBatch-shotting without reloading chrome each time?
- amelius 9y agoThis is a step backward from my current workflow which uses vector graphics.
- web007 9y agoI'm glad the dev included this summary: Oh god, this is horrifying. You have built a monster and it is made of JavaScript. Yes it is. Yes I have.
- shocks 9y agoImages of code are the worst. Completely unusable.
- eropple 9y agoHe's using them for a Keynote presentation. I think it's probably okay.
- a3_nm 9y agoNot really. For instance, if you put the PDF file of the presentation online, then search engines will not be able to index this code easily, humans will not be able to cut and paste the code easily, etc.
- davidw 9y agoI've used Emacs' htmlize to good effect in the past.
- zuck9 9y agoI'm at a loss here, why do people need images of syntax-highlighted code? Text inside images cannot be easily copied.
- severine 9y agohttps://news.ycombinator.com/item?id=15220441 https://news.ycombinator.com/item?id=15220441
- deleted 9y ago[deleted]
- thinbeige 9y agoI 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.
- wattengard 9y agoYou assume he uses HTML/JS/CSS for presentation. What if it's Keynote/Powerpoint?
- thinbeige 9y agoIf he presents code then a HTML/CSS/JS system should be prefered aince syntax highlighting is easier. Something you can't get automatically done with the alternatives you mentioned.
- minighost 9y agoVim 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
- adamors 9y agoOn a Mac you can use pstopdf (or just open the PS file in Preview).
- sus_007 9y agoOr convert the ".ps" file into ".jpeg" instead ? 4. Using ghostscript: gs -sDEVICE=jpeg -dJPEGQ=100 -dNOPAUSE -dBATCH -dSAFER -r300 -sOutputFile=filename.jpg filename.ps
- sabarasaba 9y agoYou can also do :TOhtml, then open the html file with your browser and print to pdf. A bit simpler imo.
- okonomiyaki3000 9y agoSeems to want to use Fira Code for some reason. I'd expect it to let the user choose which font should be used but, if not, at least don't require one with those ridiculous ligatures.
- wattengard 9y agoWhy are they ridiculous?
- okonomiyaki3000 9y agoThis article pretty much sums it up. http://tinyletter.com/mbutterick/letters/q-ligatures-in-programming-fonts-a-hell-no http://tinyletter.com/mbutterick/letters/q-ligatures-in-prog...
- ythn 9y agoProtip: Copy syntax highlighted code from VSCode and paste it straight into MS Word. Retains coloring and formatting, looks great.
- jxy 9y agoI've been doing the following for my keynote slides. 1. Write in emacs org-mode code blocks 2. Export to html (requires htmlize) 3. Copy and paste the html from safari to keynote The Emacs theme determines the syntax highlighting. Org-mode controls the html export (font family, font size, line spacing), with optional line number or output from executions. The copy-pasting from safari to keynote preserves all the formatting.
- pjmlp 9y agoAn over engineered solution for what is super easy with Powerpoint and Notepad++.
- carlmr 9y agoYeah, 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.
- omegote 9y agoThis 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...
- carlmr 9y agoI'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.
- molszanski 9y agoI will just leave it here: http://instaco.de/ http://instaco.de/