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.
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.
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.
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 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.
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
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
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)
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.
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
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.
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.
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!
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.
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).
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?
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.
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.
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.
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.
SVG 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.
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.
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
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 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.
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.
> 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.
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?
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.
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.
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.
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.
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...
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.