14 ms·
Show HN: Ray.so – Create images of your code
- offtop5 6y agoThis 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
- whalesalad 6y agoFun 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 https://www.speedtest.net/result/10946633415.png)
- thomaspaulmann 6y agoWe wanted to keep the customisations simple that’s also why we have curated colors.
- pindab0ter 6y agoBut 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?
- thomaspaulmann 6y agoThe 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.
- leppr 6y agoThe URL preview would be a killer feature for sharing on social networks.
- kirktrue 6y agoLooks 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?
- umvi 6y agoIt'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 https://svenkadak.com/blog/scrollbar-blindness
- chrisseaton 6y agoHow can you make text look editable?
- zardinality 6y agoBlink the cursor at the end or highlight the text area sound reasonable to me
- bikeshaving 6y agoTrying to get an input to autofocus with any reliability in browsers is the third hardest problem in computer science.
- airstrike 6y agoFake the cursor if needed
- galaxyLogic 6y agoHow 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.
- ironmagma 6y agoFeature 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.
- deleted 6y ago[deleted]
- Shared404 6y agoThat 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.
- CGamesPlay 6y agoDoes your editor not have a print menu? I just printed a file from MacVim, looks great on paper.
- ironmagma 6y agoIt 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).
- asidiali 6y agoThis is awesome! Would love the ability to alter the background of the window beyond light & dark.
- thomaspaulmann 6y agoWe wanted to keep a native-like feel. Anything specific in mind? More color ranges?
- asidiali 6y agoMakes 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.
- zardinality 6y agoSimilar website: https://carbon.now.sh/ https://carbon.now.sh/ . They probably have more themes but I like this conciseness.
- 112 6y agoCarbon 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.
- curun1r 6y agoAlso: https://github.com/Aloxaf/silicon https://github.com/Aloxaf/silicon
- ediardo 6y agoI 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 https://opencollective.com/carbon-app
- paveloom 6y agoWhy? There is already Carbon (https://carbon.now.sh https://carbon.now.sh) for that.
- umvi 6y agoWhy not? Competition is healthy!
- jimmy2020 6y agoIt is but maybe for a more wider area
- jack_riminton 6y agoI said the same about the wheel. We were perfectly ok with Oxen
- WORMS_EAT_WORMS 6y agoLove 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!
- thomaspaulmann 6y agoGreat 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.
- WORMS_EAT_WORMS 6y agoDope. Automatically like this goes a long way I'd say: Before: https://ibb.co/ZYxxFY5 https://ibb.co/ZYxxFY5 After: https://ibb.co/PC98vDr https://ibb.co/PC98vDr
- mechero 6y agoReally nice project! This could be very useful for technical / programming blogs. Are you planning to offer a REST API?
- thomaspaulmann 6y agoYeah, 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?
- mechero 6y agoSay 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.
- thomaspaulmann 6y agoLove the CI integration. A simple API should allow to build plugins for blogging platforms.
- kaeruct 6y agoWouldn't this make the code snippets completely inaccessible since you cannot copy text from an image?
- mechero 6y agoIndeed, 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.
- da_big_ghey 6y agoI like it, thanks for making this. Any chance you could add an option to remove the three dots in the top-left?
- thomaspaulmann 6y agoWe 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...
- psz 6y agoIt begs for SVG export.
- thomaspaulmann 6y agoYeah popped up in our Slack community. Seems to be handy to embed it into READMEs?!
- psz 6y agoSVG should be able to be embedded anywhere the regular images can be, at least in browser contexts. The advantages: vector graphics, so infinitely scalable, editable and smaller file size.
- tkzed49 6y agoWould be awesome if this supported SVG for better accessibility/making code copyable!
- thomaspaulmann 6y agoSeems 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?
- JarekS 6y agoOr to a website - scales much better!
- tracyhenry 6y agoIMHO 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.
- pmarreck 6y agoUnless it's Elixir. Elixir's notably missing ;)
- lcfcjs 6y agono one uses that man
- dwwoelfel 6y agoIf you're looking for this, but with an API, I built https://sourcecodeshots.com https://sourcecodeshots.com to power syntax highlighting and Open Graph images of code for https://essay.dev 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 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.
- notafraudster 6y agoThis 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.
- dwwoelfel 6y agoIf 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
- deleted 6y ago[deleted]
- solopov 6y agoHow do you create images without a headless browser?
- vermilingua 6y ago
- neilpanchal 6y agoThere 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/server.go https://git.sr.ht/~sircmpwn/core-go/tree/master/item/server/...
- RocketSyntax 6y agofont size =)
- thomaspaulmann 6y agoWanna change it? We curated the themes to make it easy to use. Maybe some small/medium/large setting for fonts could help.
- r1ch 6y agoVery pretty, though syntax highlighting for HTML seems to be conspicuously absent.
- thomaspaulmann 6y agoThanks for reporting. We need to add it for sure!
- 0xDEEPFAC 6y agoCool, but.... no Ada, Pascal, or Delphi... R.I.P. : (
- alpaca128 6y agoI 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.
- strangetortoise 6y agoI 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?
- abc_lisper 6y agoIs there way to keep it as text, but make it uneditable? Ohh.. wait!
- roywiggins 6y agoTwitter actually supports picture descriptions. I think it embeds it in the alt-text on the page. https://help.twitter.com/en/using-twitter/picture-descriptions https://help.twitter.com/en/using-twitter/picture-descriptio...
- follower 6y agoYeah, 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.div.3 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.div.14 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 http://audiogif.rancidbacon.com :) )
- kaeruct 6y agoReally hard to use for me on mobile Chrome. Is it supposed to work on mobile?
- leifg 6y agoI 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)
- shuntress 6y agoNot 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?
- redisman 6y agoI'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?
- callmekatootie 6y agoI 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 https://github.com/carbon-app/carbon) The Github Action in question: https://github.com/callmekatootie/carbonate https://github.com/callmekatootie/carbonate
- schroffl 6y agoNow that sounds like an accessibility nightmare :P
- FunnyLookinHat 6y agoNeat! 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!
- thomaspaulmann 6y agoa11y was mentioned a bunch of times and we’ll take a look into how do better support it.
- davisdude 6y agoThis 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.
- simooooo 6y agoMake a visual studio plugin with this, that lets you use your current theme, so you can make best use of VS Code's syntax highlighting
- l00sed 6y agoIs there a way to create these images from Vim or the shell in a terminal emulator?
- lcfcjs 6y agoDamn all you journalists are loving this, here's a tip download a code editor and take a screenshot.
- qq4 6y agoI 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.
- leppr 6y agoThe 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.
- wkrsz 6y agoOne use case I can think of is creating a series of previews with consistent styling, regardless of current editor/terminal configuration/font rendering settings.
- amelius 6y agoI 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.
- callmekatootie 6y agoI 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 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
- stephenr 6y agoWhy 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.
- galaxyLogic 6y agoA 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.
- hatemben 6y agoBeautiful 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.
- sillysaurusx 6y agoProbably 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.
- moth-fuzz 6y agoEither 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.
- jp1016 6y agoOur 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 https://codekeep.io/screenshot