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.
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.
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.
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.
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.
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.
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...
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.
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.
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.
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.
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 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/...
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?
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.
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.
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.
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.
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.
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
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.
129 comments
[ 5.4 ms ] story [ 247 ms ] threadAnyway you can use some type of cloud IDE to run these examples. For JavaScript that should be pretty easy
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)
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?
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?
[0] https://svenkadak.com/blog/scrollbar-blindness
One of the shortcomings of HTML/CSS seems to be that you can not style the cursor a.k.a caret.
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.
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.
The dark/light definitely look good on most palettes regardless, so great defaults.
[0] https://opencollective.com/carbon-app
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!
Before: https://ibb.co/ZYxxFY5
After: https://ibb.co/PC98vDr
I guess a similar process could work for other blogging platforms.
And, anyway, most people would rather clone the public repo or use GitHub for copy/paste purposes.
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.
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.
For the languages I don't know, I looked at the code people posted on rosettacode.org
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.
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/...
R.I.P. : (
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.
Edit: Perhaps something can be done by somehow embedding the content into the image (EXIF?) Metadata?
https://help.twitter.com/en/using-twitter/picture-descriptio...
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 :) )
What do you know, people love fancy and decorative things. Just human nature.
The other is documentation for code, something that visually impaired people are able to do if the documentation is accessible.
<svg role="img" aria-label="[title + description]"> <title>[title]</title> <desc>[long description]</desc> ... </svg >
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.
Too bad Twitter isn't a tech company, otherwise they could implement something like a code view in tweets. Wait a minute…
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.
https://blog.twitter.com/official/en_us/a/2016/accessible-im...
Facebook: https://www.facebook.com/help/214124458607871
Instagram: https://help.instagram.com/503708446705527
It's becoming a lot more common!
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.
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.
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/
My Slack is similarly setup, to the limits that the themeing in Slack allows. :)
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...
The only missing feature I really need is Elixir syntax support (even though Ruby works for most examples)
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?
- 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
Elixir's notably missing ;)