Show HN: Ray.so – Create images of your code | Hacker News Reader

Show HN: Ray.so – Create images of your code

ray.so

384 pointsthomaspaulmann123 comments

If you're looking for this, but with an API, I built https://sourcecodeshots.com to power syntax highlighting and Open Graph images of code for https://essay.dev.

I initially used carbon.now.sh, but they don't have an API, and the community-provided API is pretty slow because it uses a headless browser to generate the image.

Source Code Shots uses VSCode's syntax-highlighting engine, so the highlighting is about as good as you can get and I can fully support a lot of languages that CodeMirror or Highlight.js haven't gotten to.

The docs, https://sourcecodeshots.com/docs, have plenty of examples of how to use it as an API. You can email me at daniel@onegraph.com if there's something you need that it doesn't support.

This is pretty cool but I notice the default R fibonacci code is like comically non-idiomatic (or poorly linted, even).

Since I suspect the cause here is copy-pasting off of an algorithms/code gallery, my guess is that there are examples across other languages. I checked everything I feel idiomatically comfortable enough and the others all seemed fine, but there are a lot of options here so who knows.

If you have a good recursive version of Fibonacci for R, I'd love to swap it out for what I currently have.

For the languages I don't know, I looked at the code people posted on rosettacode.org

How do you create images without a headless browser?

Poe’s Law hard at work here.

There are lots of different approaches you could take. For sourcecodeshots, I run it through VSCode's tokenizer (https://github.com/microsoft/vscode-textmate) and then use node-canvas to generate the image one line at a time.

It's a very imperative process and fairly slow on a cpu, but the nice thing is that I can run the same code in the browser to speed up development. The Rust project, https://github.com/Aloxaf/silicon, mentioned in another part of the comments is probably faster, but I didn't find it when I was searching for a solution.

What's the reason for the sideways traffic light in the top bar? Is it part of the final image?

It's supposed to resemble a mac app window. I can add a setting to remove it if you like. Email me at daniel@onegraph.com and I'll let you know when it's available.

Similar website: https://carbon.now.sh/ . They probably have more themes but I like this conciseness.

Carbon is awesome, works offline, and can be integrated with any decent editor, so you can just select code and press a keybind to get the image on your clipboard.

I didn't know there's an editor integration to Carbon. Is there a specific extension for VScode?

yes - https://marketplace.visualstudio.com/items?itemName=ericadam...

thank you!

Also: https://github.com/Aloxaf/silicon

I like Carbon, the option of creating new themes and saving snippets. Is the project still alive? I got a message from Open Collective [0] saying they stopped accepting donations.

[0] https://opencollective.com/carbon-app

Not trying to be argumentative but this is completely over my head and I do not understand the purpose.

Is there some way to get a CSS snippet out for publishing in a blog/article/presentation or is it only images?

edit: is this purely to add a rounded border/pad that you wouldn't get with WND+SHIFT+S / CMD+SHIFT+4 for sharing on sites where you don't control the style?

I'd love this if it was a CSS thing like when people embed Twits. I'm just not sure when you would want an image of code. Most likely use case seems like a README on github or your product page but then you'd want it to be plain text right?

I created a Github Action to generate images for code, within github issues. The benefits:

- Easy to view and understand the image of the code v/s the code block text when using a mobile device. Why? Easier to scroll images v/s text.

- Members will no longer have to rely on the issue reporters and commenters to format their code blocks correctly. Using the in built formatter, the code is always structured properly

- Maintainers can style the code blocks to suit their project's language and guidelines and not put the onus of this on the issue reporter / commenter

This uses carbon (https://github.com/carbon-app/carbon)

The Github Action in question: https://github.com/callmekatootie/carbonate

Now that sounds like an accessibility nightmare :P

I have to say this feels rather strange next to the functionality of my PrintScreen key.

Maybe I'm missing the point. I get that it's easier to look at than pastebin, but I'm struggling to grasp what else. I've always agreed that LOC is a terrible measurement, and similarly I don't delude myself into thinking positioned or colored code is more functional.

The use cases that come to mind are sharing previews of code snippets on platforms that don't support code formatting/highlighting like Twitter or Medium.

The cleaner fake UI of this site, uncluttered by any warning or other editor glyphs, and the auto-resize make it slightly more convenient than an editor screenshot I suppose.

> The use cases that come to mind are sharing previews of code snippets on platforms that don't support code formatting/highlighting like Twitter or Medium

But still...why not print screen?

You have to read up to the second sentence.

One use case I can think of is creating a series of previews with consistent styling, regardless of current editor/terminal configuration/font rendering settings.

Fun to play with. Most surprising is the auto-indent when typing Clojure code.

The #1 missing feature is the ability to select a different typeface. #2 would be the ability to serve up an image from a URL like a pastebin or a-la speedtest.net speed test (https://www.speedtest.net/result/10946633415.png)

We wanted to keep the customisations simple that’s also why we have curated colors.

But why? I have very strong feelings about the look and feel of my code/coding environment and there’s no way I’m alone in this.

When creating a service that allows people to “show off” bits of their code, why stifle them in making it feel like it’s theirs?

The URL with a preview is on our radar. Gonna look into it when we have some spare time. This is a side project of our team that came out of a hackathon.

The URL preview would be a killer feature for sharing on social networks.

Looks great!

I know it should have been more obvious, but I didn't realize the text was editable. I was looking for an 'upload your code' button. Maybe put one of those "Try Me!" badges with an arrow pointing to the code like on toy boxes?

It's par for the course with Apple-esque UIs. Like the classic "invisible scrollbar"[0] that prevents you from knowing you can scroll something down and see more. Form > Function

[0] https://svenkadak.com/blog/scrollbar-blindness

How can you make text look editable?

Blink the cursor at the end or highlight the text area sound reasonable to me

Trying to get an input to autofocus with any reliability in browsers is the third hardest problem in computer science.

Fake the cursor if needed

How do you make a fake cursor that works? When you click anywhere within the text, how do you know where to position the fake-cursor then? If you use arrow-keys it should move the cursor left and right and up and down respecting the line- and character boundaries.

One of the shortcomings of HTML/CSS seems to be that you can not style the cursor a.k.a caret.

You can make an (obviously) fake blinking cursor at the end possibly with a label showing that it's editable.

My point is that when you focus too much on beauty, you tend to sacrifice some functionality. There are tons of ways to signal that text is editable, but most of them are "ugly" or not elegant. To go to the opposite extreme, you could build a functionally equivalent website that is super basic and has no CSS - literally just a textarea to edit the code, checkboxes for the options, and buttons to generate the image. You get the same output, but it's not as pleasing to look at - but hey, it's highly functional and you know everything you are allowed to do at a glance.

The goal for most people is to strike a balance between form and function. In my opinion, I personally think you should always err on more function than form, but the Apple-esque UI design philosophy tends to favor form over function - you know, getting rid of "ugly" UI elements that traditionally telegraphed functionality.

Put it inside a textarea, and don't break the textarea styling.

Good feedback! We got a similar request for the title. Gonna look into how we can improve it

Neat! This solves a problem for me with generating slides that include code snippets. I'm sure it helps with social media images and whatnot as well. It'd be great if you could also get a HTML snippet to embed into a site that would be a11y friendly!

a11y was mentioned a bunch of times and we’ll take a look into how do better support it.

This may not work for your case, but if you're good with Vim you could try the `:TOhtml` command, which converts a range into an HTML file matching the theme you're using.

Love it! Congrats and cool project. I think you killed this and have something awesome in your portfolio for a long time.

My only suggestion is these code snippets are fire on Twitter for a lot of people getting their RT/likes/following on.

Specifically, that means maybe adding an option for forcing some sizes that are ideal for share graphics (width/height, auto font-size, auto centering, etc..). Take the guess work out of it. Good luck!

Great one! We want to add a share on Twitter function and then the sizes matter. For now we went with the simple approach but definitely up for improvements.

Dope. Automatically like this goes a long way I'd say:

Before: https://ibb.co/ZYxxFY5

After: https://ibb.co/PC98vDr

Beautiful but useless, I prefer sharing code with simple code tag rather than code in images, so people can copy test correct etc. For me code should be compiled, so it should be in text not in image.

Probably try not to call someone's work "beautiful but useless" on their Show HN. I came on here to brag how awesome my Lisp looks now. It's useful for me.

There is a certain level of straightforwardness that I gravitate towards when it comes to engineering graphics. Purple/Megenta gradients are the 2020 era Stripe/Apple-inspired aesthetic. Obviously, I am an outlier here and I do not want to diminish your efforts the slightest!

Beauty is subjective and I do not resonate with the cliche aesthetic (gradients, flat UI, soft pastel colors, rounded corners). It's a trend and it will come and go. I am inclined towards the timelessness of the International Style, Swiss Graphics, Brutalism, ultra modernist and offensively low-aesthetic-value aesthetics such as: https://git.sr.ht/~sircmpwn/core-go/tree/master/item/server/...

Our screenshot tool provides additional functionalities and predefined templates, which allows users to share stunning images and by saving them on codekeep , users can link to those screenshot, where users can select the code and copy it as needed.

You can add emojis, custom images, place logos of your favourite programming language or service, add twitter/facbook instagram handles, custom background.

Apart from the screenshot module, codekeep allows you to store and share code snippets, most of the ui is inspired from google keep and i have added more features on top of that, we named it codekeep (google keep for code snippets).

do checkout and let us know your thought :-) https://codekeep.io/screenshot

Would be awesome if this supported SVG for better accessibility/making code copyable!

Seems like a lot of folks wanna have SVG support. We’ll take a look on how to support it. Do I understand it correctly that this is better to add it to a README?

Or to a website - scales much better!

IMHO if your code snippet image isn't scale invariant, I'd rather just take a literal screenshot with my editor. From my experiences with Carbon they don't support SVGs well - could be that it's a hard problem.

Really nice project! This could be very useful for technical / programming blogs. Are you planning to offer a REST API?

Yeah, we wanted to add an API at some point and also provide a deeper integration with Raycast. What would you like to build with the API?

Say I have code snippets I want to include in a Jekyll blog for example. I could call your API from a pipeline process, store the images and link them from the posts. A plugin would be deeper integration, but an API would just work and would be great already.

I guess a similar process could work for other blogging platforms.

Love the CI integration. A simple API should allow to build plugins for blogging platforms.

Wouldn't this make the code snippets completely inaccessible since you cannot copy text from an image?

Indeed, but I'd link the GitHub code sources below each picture and provide good alt descriptions. JS plugins like Highlight or Prism end up building massive HTML making e.g. google's pagespeed tools complain about DOM sizes.

And, anyway, most people would rather clone the public repo or use GitHub for copy/paste purposes.

This is awesome! Would love the ability to alter the background of the window beyond light & dark.

We wanted to keep a native-like feel. Anything specific in mind? More color ranges?

Makes sense - I specifically want some darker shade of blue or purple, but that's because I want the window to match the colors from my brand palette, and not just be grayscale.

The dark/light definitely look good on most palettes regardless, so great defaults.

It begs for SVG export.

Yeah popped up in our Slack community. Seems to be handy to embed it into READMEs?!

Either I'm doing something wrong or there isn't really any syntax highlighting for C++, other than numbers and strings.

Also, there's no syntax option for plain C, but that's an understandable oversight since a good 99% of C's syntax is shared with C++ anyway.

Lastly, when writing C/C++ it auto-detects Objective-C. Just a few things I detected as a primarily C & C++ developer.

Other languages seem to come out great, and it's really a very nifty tool in the end.

Update: C# and Java seem to have a similar lack of coloring.

Feature request: This seems half-the-way there to a site I've been wanting for a long time, one that will give you a printer-friendly syntax highlighted view of a codebase.

That sounds like a cool tool. It seems like Web is probably not the way to go for that though, as printing even just vanilla web pages can be a pain.

I could see something like automating a typesetting tool working however.

Edit: Side note, I'm kinda an idiot, so I could be wrong about web not being the right platform.

Does your editor not have a print menu? I just printed a file from MacVim, looks great on paper.

It doesn’t (Vscode/Atom). I’ll give MacVim a try, although ideally the tool would print multiple files en masse (perhaps with an ignore list).

This looks really cool, I would love some way to integrate it with a program tutorial.

Anyway you can use some type of cloud IDE to run these examples. For JavaScript that should be pretty easy

I need a tool which can split code nicely across pages of a book. And obviously it should output SVG so it looks great on high DPI devices. Another requirement is that sometimes the code should start somewhere in the middle of a page.

I see folks wondering about the use case - so here's one: I created a Github Action for use in Github Actions. The benefits:

- Easy to view and understand the image of the code v/s the code block text when using a mobile device. Why? Easier to scroll images v/s text.

- Members will no longer have to rely on the issue reporters and commenters to format their code blocks correctly. Using the in built formatter, the code is always structured properly

- Maintainers can style the code blocks to suit their project's language and guidelines and not put the onus of this on the issue reporter / commenter

Reference: https://github.com/callmekatootie/carbonate

I used Carbon to generate the images in this case - but you get the gist of what one can use images of code for

Why on earth would you want to provide a code snippet as an image for that?

Do you want retyping-bugs? That’s how you get retyping-bugs.

Very pretty, though syntax highlighting for HTML seems to be conspicuously absent.

Thanks for reporting. We need to add it for sure!

A shortcoming of this would seem to be that there are no line-numbers. (?) If you send a picture of code and want to discuss it with others it would be helpful to be able to refer to parts of the code by line-number.

I may be rather opinionated on this, but there are literally community efforts to transcribe memes and other pictures containing text so visually impaired people get access to content, and meanwhile about every 3-4 weeks HN features yet another web app that basically takes human readable text and stores it in one of the most inefficient and inaccessible ways possible. It becomes invisible to screenreaders, impossible to copy-paste like you'd otherwise expect from text based content.

I don't want to come across as all too negative, but it somehow feels really strange to have so many websites that basically just take a fancy screenshot of text. To me it kind of comes across like a developer version of those Instagram pictures of meals at restaurants.

I think one of the problems here is that people wanna share code snippets on social media, where generally, the other approaches mean linking to an external github gist or similar, which isn't as visible. I'm not sure if I see a good solution, other than suggesting that the "link previews" for social media sites display the code snippet inline, if it's a link to a pastebin/github gists page.

Edit: Perhaps something can be done by somehow embedding the content into the image (EXIF?) Metadata?

Is there way to keep it as text, but make it uneditable? Ohh.. wait!

Twitter actually supports picture descriptions. I think it embeds it in the alt-text on the page.

https://help.twitter.com/en/using-twitter/picture-descriptio...

Yeah, I was just about to suggest embedding the code in a PNG text chunk: http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d...

Twitter etc should really already have standardised on a way to store the ALT text in an image so it only ever needs to entered once.

Even GIF has support for text in a couple of different forms.

( Although I learned something new about PNG's support for GIF's text support here: http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d... )

( I've spent far too long reading the GIF spec in relation to my project that adds audio to GIFs: http://audiogif.rancidbacon.com :) )

Some people love the text from an aesthetic view. I don't think we should be against that but rather to advocate the improvement of accessible technology.

Engineering documentation shouldn't be about making pretty pictures, it should be about functionalism and putting that at the top of the list just below accessibility.

What do you know, people love fancy and decorative things. Just human nature.

I'm not sure this is about Engineering documentation. I mean is that the purpose of the site? I agree Documentation should put function first but this is more about Aesthetics then documentation. A form of art if you will.

Doesn’t get you shares on Twitter though so shoulds aren’t relevant.

When engineering and art combine though, you get beautiful things like 1970s NASA documentation: https://standardsmanual.com/products/nasa-graphics-standards...

One is documentation for creating graphics, something the blind are naturally excluded from.

The other is documentation for code, something that visually impaired people are able to do if the documentation is accessible.

We have great accessible technology for colored text with background images.

Just not a valid concern in 2021

What would be great is if it generated an SVG with the screen-reader accessible title and description built in.

Why do you even need SVG if you're on the web already though? Nothing in these code pictures requires more than basic CSS and HTML. You can go wild with fonts, gradients, shadows, etc. to make beautiful looking pre and code elements. Tools like prismjs will syntax highlight with spans. Everything is in plain old semantic HTML with aria properties where appropriate.

You need it for places that will only take images.

Good point. Totally agree. SVG would be nice way out but it is also hard to make accessible in comparison to pure html. Another example are badges. Even shields.io SVG badges are hard to make screen reader compatible (personally gave up on this some time ago). In the end inclusive design will make the web better for everyone beyond the short wow effects.

> a developer version of those Instagram pictures of meals at restaurants

I guess those pictures are popular because food is easy to relate to, and people build lots of social interactions around eating. Developers also relate to things about code, and like to share those relations among each other.

I feel some puzzlement about the format too, though. These days it's so easy to make text on the web look nice, and it's easily accessible, copyable and searchable.

But you can't share it on Twitter (which is almost 100% of the use-case for this kind of tools).

Too bad Twitter isn't a tech company, otherwise they could implement something like a code view in tweets. Wait a minute…

It's not like the alt attribute stopped existing or anything. This simply lets you make what amounts to pretty screencaps of your code

Name one social media/image hosting site that lets you set an alt attribute.

And when you actually have control over the content you can use some nice CSS to get the same look with a fraction of the size and 100% accessible.

Twitter does.

https://blog.twitter.com/official/en_us/a/2016/accessible-im...

Twitter: https://help.twitter.com/en/using-twitter/picture-descriptio...

Facebook: https://www.facebook.com/help/214124458607871

Instagram: https://help.instagram.com/503708446705527

It's becoming a lot more common!

If you're seeing many people building the same thing, it's probably because there's a need that you might have overlooked.

Here's one: people want to share formatted snippets on Twitter. They often post a link to the code below the pic, but being able to see it within the tweet is quite useful.

Just throw it in the alt text

I use fancy code display tools when making slide shows.

Though in my case I have a plugin for Notepad++ that lets me copy syntax highlighted code from NP++ and paste it into PowerPoint with all the highlighting and formatting maintained. Super cool plugin.

I can't just screenshot my editor (VSCode) because I use a theme that many people find violently irritating (DOS Edit).

Anyway, this looks like someone's fun little hacked together project to make something shiny. Making shiny things is fun. No one craps on shader toys for being inaccessible.

If someone tried to use the linked tool to make screenshots and used them in an actual MOOC or any other place for public consumption, yeah, wrong tool for the job. Don't do that. Use one of the dozens of existing tools that pretty print and embed code in an accessible way.

The parent’s point is regarding accessibility of code examples, and your comment seems to be about the convenience of pasting an image of code into a tool that should make accessible text easy, but falls short when it comes to code.

If this tool created an accessible SVG instead of a PNG then I think it would be getting a lot less criticism. There are accepted ways[0] to make SVGs accessible, and they are better for performance than the alternatives.

When you give people shiny tools that make it hard for visually impaired people to consume information, then more of that sort of content will be embedded in blogs, presentations, MOOCs or whatever else.

PowerPoint and Google Slides should really just get their act together with regards to rendering code blocks. It’s quite sad that in today’s world they still don’t have a built in way to show code on slides in a formatted and colorized way.

[0] https://www.w3.org/TR/SVG-access/

Sadly, many places will only accept images in PNG (or heaven forbid, JPEG) format :( SVG export would be cool, though.

I just googled your VSCode theme and can provide another anecdote of violent irritation.

I got mildly pleasant nostalgic feelings looking at screenshot of DOS Edit theme myself, but I still wouldn't want it as my daily driver. Can totally understand about screenshots of that not really being cool to chuck in a presentation too.

It is remarkably usable, promise. But then again I wear blue light filtering glasses so maybe they reduce some of the excesses. :)

My Slack is similarly setup, to the limits that the themeing in Slack allows. :)

Its unbelieveable for me how so many modern 'coders' 'post' their code samples in a non copy paste friendly way.

Sure let me watch your boring 25 minutes video just to MAYBE get a glance on that one line of code i am looking for...

I love it. Will definitely use this for presentations.

The only missing feature I really need is Elixir syntax support (even though Ruby works for most examples)

Unless it's Elixir.

Elixir's notably missing ;)

Is there a way to create these images from Vim or the shell in a terminal emulator?

Really hard to use for me on mobile Chrome. Is it supposed to work on mobile?

font size =)

Wanna change it? We curated the themes to make it easy to use. Maybe some small/medium/large setting for fonts could help.

Cool, but.... no Ada, Pascal, or Delphi...

R.I.P. : (

I like it, thanks for making this. Any chance you could add an option to remove the three dots in the top-left?

We wanted to achieve some native looking windows therefore the three dots. Though, it's very macOS specific. We want to keep the configurations to a minimum to get quickly good looking results. Maybe some minimal theme could work where we strip away most of the stuff. Just thinking out loud...

Why? There is already Carbon (https://carbon.now.sh) for that.

Why not? Competition is healthy!

It is but maybe for a more wider area

I said the same about the wheel. We were perfectly ok with Oxen

Reply on news.ycombinator.com