TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

384 pointsby thomaspaulmannover 4 years ago

31 comments

dwwoelfelover 4 years ago
If you&#x27;re looking for this, but with an API, I built <a href="https:&#x2F;&#x2F;sourcecodeshots.com" rel="nofollow">https:&#x2F;&#x2F;sourcecodeshots.com</a> to power syntax highlighting and Open Graph images of code for <a href="https:&#x2F;&#x2F;essay.dev" rel="nofollow">https:&#x2F;&#x2F;essay.dev</a>.<p>I initially used carbon.now.sh, but they don&#x27;t have an API, and the community-provided API is pretty slow because it uses a headless browser to generate the image.<p>Source Code Shots uses VSCode&#x27;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&#x27;t gotten to.<p>The docs, <a href="https:&#x2F;&#x2F;sourcecodeshots.com&#x2F;docs" rel="nofollow">https:&#x2F;&#x2F;sourcecodeshots.com&#x2F;docs</a>, have plenty of examples of how to use it as an API. You can email me at daniel@onegraph.com if there&#x27;s something you need that it doesn&#x27;t support.
评论 #26170633 未加载
评论 #26173822 未加载
评论 #26172665 未加载
zardinalityover 4 years ago
Similar website: <a href="https:&#x2F;&#x2F;carbon.now.sh&#x2F;" rel="nofollow">https:&#x2F;&#x2F;carbon.now.sh&#x2F;</a> . They probably have more themes but I like this conciseness.
评论 #26169409 未加载
评论 #26170295 未加载
评论 #26175237 未加载
shuntressover 4 years ago
Not trying to be argumentative but this is completely over my head and I do not understand the purpose.<p>Is there some way to get a CSS snippet out for publishing in a blog&#x2F;article&#x2F;presentation or is it only images?<p>edit: is this purely to add a rounded border&#x2F;pad that you wouldn&#x27;t get with WND+SHIFT+S &#x2F; CMD+SHIFT+4 for sharing on sites where you don&#x27;t control the style?
评论 #26171186 未加载
评论 #26175057 未加载
qq4over 4 years ago
I have to say this feels rather strange next to the functionality of my PrintScreen key.<p>Maybe I&#x27;m missing the point. I get that it&#x27;s easier to look at than pastebin, but I&#x27;m struggling to grasp what else. I&#x27;ve always agreed that LOC is a terrible measurement, and similarly I don&#x27;t delude myself into thinking positioned or colored code is more functional.
评论 #26174606 未加载
评论 #26191431 未加载
whalesaladover 4 years ago
Fun to play with. Most surprising is the auto-indent when typing Clojure code.<p>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 (<a href="https:&#x2F;&#x2F;www.speedtest.net&#x2F;result&#x2F;10946633415.png" rel="nofollow">https:&#x2F;&#x2F;www.speedtest.net&#x2F;result&#x2F;10946633415.png</a>)
评论 #26168840 未加载
评论 #26168827 未加载
kirktrueover 4 years ago
Looks great!<p>I know it should have been more obvious, but I didn&#x27;t realize the text was editable. I was looking for an &#x27;upload your code&#x27; button. Maybe put one of those &quot;Try Me!&quot; badges with an arrow pointing to the code like on toy boxes?
评论 #26168799 未加载
评论 #26168819 未加载
FunnyLookinHatover 4 years ago
Neat! This solves a problem for me with generating slides that include code snippets. I&#x27;m sure it helps with social media images and whatnot as well. It&#x27;d be great if you could also get a HTML snippet to embed into a site that would be a11y friendly!
评论 #26176011 未加载
评论 #26171526 未加载
WORMS_EAT_WORMSover 4 years ago
Love it! Congrats and cool project. I think you killed this and have something awesome in your portfolio for a long time.<p>My only suggestion is these code snippets are fire on Twitter for a lot of people getting their RT&#x2F;likes&#x2F;following on.<p>Specifically, that means maybe adding an option for forcing some sizes that are ideal for share graphics (width&#x2F;height, auto font-size, auto centering, etc..). Take the guess work out of it. Good luck!
评论 #26169417 未加载
hatembenover 4 years ago
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.
评论 #26177983 未加载
neilpanchalover 4 years ago
There is a certain level of straightforwardness that I gravitate towards when it comes to engineering graphics. Purple&#x2F;Megenta gradients are the 2020 era Stripe&#x2F;Apple-inspired aesthetic. Obviously, I am an outlier here and I do not want to diminish your efforts the slightest!<p>Beauty is subjective and I do not resonate with the cliche aesthetic (gradients, flat UI, soft pastel colors, rounded corners). It&#x27;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: <a href="https:&#x2F;&#x2F;git.sr.ht&#x2F;~sircmpwn&#x2F;core-go&#x2F;tree&#x2F;master&#x2F;item&#x2F;server&#x2F;server.go" rel="nofollow">https:&#x2F;&#x2F;git.sr.ht&#x2F;~sircmpwn&#x2F;core-go&#x2F;tree&#x2F;master&#x2F;item&#x2F;server&#x2F;...</a>
jp1016over 4 years ago
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.<p>You can add emojis, custom images, place logos of your favourite programming language or service, add twitter&#x2F;facbook instagram handles, custom background.<p>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).<p>do checkout and let us know your thought :-) <a href="https:&#x2F;&#x2F;codekeep.io&#x2F;screenshot" rel="nofollow">https:&#x2F;&#x2F;codekeep.io&#x2F;screenshot</a>
tkzed49over 4 years ago
Would be awesome if this supported SVG for better accessibility&#x2F;making code copyable!
评论 #26169902 未加载
mecheroover 4 years ago
Really nice project! This could be very useful for technical &#x2F; programming blogs. Are you planning to offer a REST API?
评论 #26169426 未加载
asidialiover 4 years ago
This is awesome! Would love the ability to alter the background of the window beyond light &amp; dark.
评论 #26168972 未加载
pszover 4 years ago
It begs for SVG export.
评论 #26169846 未加载
moth-fuzzover 4 years ago
Either I&#x27;m doing something wrong or there isn&#x27;t really any syntax highlighting for C++, other than numbers and strings.<p>Also, there&#x27;s no syntax option for plain C, but that&#x27;s an understandable oversight since a good 99% of C&#x27;s syntax is shared with C++ anyway.<p>Lastly, when writing C&#x2F;C++ it auto-detects Objective-C. Just a few things I detected as a primarily C &amp; C++ developer.<p>Other languages seem to come out great, and it&#x27;s really a very nifty tool in the end.<p>Update: C# and Java seem to have a similar lack of coloring.
ironmagmaover 4 years ago
Feature request: This seems half-the-way there to a site I&#x27;ve been wanting for a long time, one that will give you a printer-friendly syntax highlighted view of a codebase.
评论 #26169175 未加载
评论 #26175775 未加载
评论 #26168806 未加载
offtop5over 4 years ago
This looks really cool, I would love some way to integrate it with a program tutorial.<p>Anyway you can use some type of cloud IDE to run these examples. For JavaScript that should be pretty easy
ameliusover 4 years ago
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.
callmekatootieover 4 years ago
I see folks wondering about the use case - so here&#x27;s one: I created a Github Action for use in Github Actions. The benefits:<p>- Easy to view and understand the image of the code v&#x2F;s the code block text when using a mobile device. Why? Easier to scroll images v&#x2F;s text.<p>- 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<p>- Maintainers can style the code blocks to suit their project&#x27;s language and guidelines and not put the onus of this on the issue reporter &#x2F; commenter<p>Reference: <a href="https:&#x2F;&#x2F;github.com&#x2F;callmekatootie&#x2F;carbonate" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;callmekatootie&#x2F;carbonate</a><p>I used Carbon to generate the images in this case - but you get the gist of what one can use images of code for
评论 #26175186 未加载
r1chover 4 years ago
Very pretty, though syntax highlighting for HTML seems to be conspicuously absent.
评论 #26169979 未加载
galaxyLogicover 4 years ago
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.
alpaca128over 4 years ago
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&#x27;d otherwise expect from text based content.<p>I don&#x27;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.
评论 #26171963 未加载
评论 #26170395 未加载
评论 #26170265 未加载
评论 #26170307 未加载
评论 #26170353 未加载
评论 #26170338 未加载
评论 #26173227 未加载
评论 #26171237 未加载
评论 #26170538 未加载
评论 #26171605 未加载
leifgover 4 years ago
I love it. Will definitely use this for presentations.<p>The only missing feature I really need is Elixir syntax support (even though Ruby works for most examples)
pmarreckover 4 years ago
Unless it&#x27;s Elixir.<p>Elixir&#x27;s notably missing ;)
评论 #26172393 未加载
l00sedover 4 years ago
Is there a way to create these images from Vim or the shell in a terminal emulator?
kaeructover 4 years ago
Really hard to use for me on mobile Chrome. Is it supposed to work on mobile?
RocketSyntaxover 4 years ago
font size =)
评论 #26170465 未加载
0xDEEPFACover 4 years ago
Cool, but.... no Ada, Pascal, or Delphi...<p>R.I.P. : (
da_big_gheyover 4 years ago
I like it, thanks for making this. Any chance you could add an option to remove the three dots in the top-left?
评论 #26170483 未加载
paveloomover 4 years ago
Why? There is already Carbon (<a href="https:&#x2F;&#x2F;carbon.now.sh" rel="nofollow">https:&#x2F;&#x2F;carbon.now.sh</a>) for that.
评论 #26169428 未加载
评论 #26169032 未加载