11 ms·

Carbon: Create and share images of source code

247 points by polm23 6y ago

chrisma0 6y ago
Neat! So this is the kind of tool all those hip programmer folks on Twitter use :) I especially like that it works directly with GitHub gist IDs (https://carbon.now.sh/c4ad9e84088d867a2b4670c3dc50e67a https://carbon.now.sh/c4ad9e84088d867a2b4670c3dc50e67a) and that the tool considers making the image accessible for people through image descriptions: https://help.twitter.com/en/using-twitter/picture-descriptions https://help.twitter.com/en/using-twitter/picture-descriptio...
- searchableguy 6y ago
  And I hate it because you can't copy paste code from a picture. It's going backwards unless it's just a few lines. I cry because all those medium, blogs, devto etc articles are using it.
  - cryo 6y ago
    Maybe providing a copy button next to the screenshot, or a toggle to get the actual text would help.
  - bArray 6y ago
    Perhaps it could be output as an SVG with an embedded image in the background? That way you could still have the image and copy-able text. EDIT: Seems to output SVGs, they just aren't well supported right now: https://github.com/carbon-app/carbon/issues/943 https://github.com/carbon-app/carbon/issues/943
erwinh 6y ago
Super love the design of this, _630w does have a point though. Would be great if there is a way to add copy-paste to something like this. Maybe through some accessibility feature it's possible?
fxtentacle 6y ago
How useless. 1. With the current design standards, "beautiful code" just means lots of useless whitespace everywhere. Code should be compact and functional, not airy. 2. It breaks copy & paste, so this is really only useful for showing off, but not for actually communicating about code or writing tutorials. 3. This tool has lower contrast and lower readability than black text on a white background. Combined, it's a tool for bragging about the wrong metric while excluding the elderly.
- fooker 6y ago
  >Code should be compact and functional, not airy. Airy and functional seems better for readability.
  - fxtentacle 6y ago
    If I had to choose between 2 screens full of source code with lots of whitespace, or half of a screen condensed, I'd always choose the variant that fits on my screen. So my personal preference is strongly against airy and more like "cram what you can into one line". But given the quick downvotes to my parent post, it seems I'm in the minority with my view that source code should be first and foremost useful.
    - touktouk 6y ago
      It is quite possible that people agree with you that source code should be first and foremost useful, but disagree on compactness vs airiness.
    - fooker 6y ago
      >cram what you can into one line This is how code gets thrown away and rewritten. Fixing bugs in dense code is a nightmare, if the code was written by someone else.
- tsumnia 6y ago
  > Code should be compact and functional, not airy. I would have to disagree for similar reasons to fooker. > It breaks copy & paste, ... not for actually communicating about code or writing tutorials. I posted it in another respond, but my research shows retyping code can be beneficial for learning. This extends to pre-internet coding books where that was the only way to recreate the code and Zed Shaw's "Learn Python the Hard Way" [1] where he explicitly states "You must type each of these exercises in, manually. If you copy and paste, you might as well not even do them." [1] https://learnpythonthehardway.org/python3/intro.html https://learnpythonthehardway.org/python3/intro.html
obituary_latte 6y ago
https://carbon.now.sh/ https://carbon.now.sh/ For a demo. Wasn’t clear from readme on quick blush that there was a live demo.
_ZeD_ 6y ago
how can I have windows' window buttons? I can choose between 3 combination but all of them are on the wrong part
saagarjha 6y ago
I’m glad that this gives better results than screenshots of code but, to be honest, a bit saddened that it has to exist at all. Twitter, I get a little: it’s meant for short thoughts and can’t really work well for code, but Medium (for example) not supporting code is hard to understand.
- cyberferret 6y ago
  AFAIK, Medium does support embedded Gists from GitHub etc. At least it did when I last wrote a programming guide in it. Update: Still seems that it does (scroll down) [0] Edit: Oops, I just remembered that HackerNoon moved off Medium to their own CMS, but those Gists did used to work on Medium too, complete with code formatting. [0] - https://hackernoon.com/building-a-face-recognition-web-app-in-under-an-hour-345aa91487c https://hackernoon.com/building-a-face-recognition-web-app-i...
  - oefrha 6y ago
    Supporting embedded gists is hardly "supporting code". We're talking about fetching one additional iframe plus a third party script per code blob, for what should be inline HTML plus ~30 lines of CSS (check out pandoc rendered HTML with syntax highlighting, for instance). The page you linked also demonstrates visually broken embeds with extraneous white space on the bottom; hardly a glowing endorsement. I get embedding Codepens and stuff for rendered code. Embedding gists for static, verbatim code is just sad. (Not saying it doesn't have its uses, but having to use it is another matter.) But this is far from the most annoying thing about Medium, so meh.
- yawaramin 6y ago
  Medium is not a technical blogging platform. Try dev.to, it has excellent syntax highlighting.
- soonnow 6y ago
  Medium does support code, without highlighting though and only accessible through unobvious keys: To begin a code block, go to a new line and type ``` (triple backtick). For inline code in a paragraph, type a single backtick ` to begin and end your code. Or highlight some text and press the backtick key.
gorgoiler 6y ago
Is there a good free equivalent of SF Mono with which I could use this? I believe the license for SF Mono restricts usage to non commercial iOS / macOS work. It’s my favourite typeface for code by far. I enjoy the sort of 1980s “Unix Manual” width of it. Sort of like the writing on architecture plans, which in the last would have been drawn by a plotter. The face in Carbon is close but had too many distracting letter forms for presenting content.
- saagarjha 6y ago
  I like Menlo as a fallback; it’s fairly clean and not particularly flashy. I’ll admit I haven’t looked at the licensing for it though; I know it ships with macOS and is almost certainly under a less restrictive license than SF Mono but it might not be as usable as you’d like. I think it’s based on DejaVu which is fairly permissive if you’re OK with a similar (if slightly less polished, IMO) font.
- baddox 6y ago
  I don’t know much about typefaces, but Roboto Mono looks fairly similar to me.
- Bishonen88 6y ago
  Perhaps not suuuper alike, but I found the jetbrains font to actually be awesome: https://www.jetbrains.com/lp/mono/ https://www.jetbrains.com/lp/mono/
  - imedadel 6y ago
    Surprisingly, setting JetBrains Mono to 13px in the editor is still way more readable than any other font. Especially on Windows.
cyberferret 6y ago
Been using Carbon for quite a while now when illustrating code in my blog posts or on Twitter etc. It is even on my Chrome shortcuts bar. Copy and paste aside, it is ideal for showcasing important bits of code such as variable or function names that you want to stand out for illustrative purposes. It is a wonderful teaching tool. In any case - who wants to be a copy and paste programmer?? </wink>
- petepete 6y ago
  Who wants people with visual impairments to read their posts?
  - anthonybullard 6y ago
    It's called ALT text. If you don't paste the same source in the alt attribute, that's the problem. Not having a nice image for sighted folks.
    - petepete 6y ago
      Alt text certainly wasn't intended for this kind of use. Screen readers don't cope with newlines in alt text particularly well, most just stop at the end of a line[0]. Also more care has to be taken when escaping the contents of the attribute, it's something people will definitely get wrong. [0] https://developer.paciellogroup.com/blog/2015/09/short-note-on-coding-alt-text/ https://developer.paciellogroup.com/blog/2015/09/short-note-...
- ljm 6y ago
  The MacOS app Deckset has a pretty sweet syntax highlighting feature where you can selectively highlight smaller parts of the code in that way, and then step through it as an animation. And at least you've got the original markdown and PDF/HTML exports for extra accessibility.
oefrha 6y ago
I learned about Carbon maybe three years ago. Back then the README example looked like this: https://user-images.githubusercontent.com/10369094/30791512-cb001438-a167-11e7-952b-f0f0e5c4499e.png https://user-images.githubusercontent.com/10369094/30791512-... Now it looks like https://user-images.githubusercontent.com/8397708/63456416-b27d1a80-c403-11e9-9572-105b089be885.png https://user-images.githubusercontent.com/8397708/63456416-b... complete with weird cursive font and all. IMO this niche obsession with cursives, ligatures and stuff in programming fonts actually hurts first impression for a significant percentage of people landing on this README.
- amake 6y ago
  In what sense is the latter font "cursive"?
  - gilnaa 6y ago
    I think he refers to the ligatures
  - saagarjha 6y ago
    I’ve seen actual cursive code fonts (just one, I think. Maybe someone knows which one I’m talking about) and this isn’t it. I’m assuming the stylized terminal/descender (particularly on the “t” and “f”) are probably what are causing it to be described this way. Edit: I’m blind and didn’t see the comment on the bottom :/ This is the cursive font I’m talking about.
    - oefrha 6y ago
      That’s <s>Operator</s> Dank Mono Italic.
      - saagarjha 6y ago
        It’s great to finally know what that font is. (And avoid it personally, to be honest…)
pcr910303 6y ago
For people who find the default padding too big(I did), you can control the presets with the Settings button - and if you want pixel-level control, you can export the carbon-config.json file from the Settings > Misc > Export config, edit in your favorite editor, and import it. I use a padding of 12px, instead of the (IMO) super big 56px.
pknerd 6y ago
Wish there was an HTML export option for blog posts.
fxtentacle 6y ago
While I felt highly sceptical at first, I have now learned that this is an amazing sales preview tool for source code tutorials. Inside the article, all source code is posted as images using Carbon. That way, your readers can follow along and understand what you're doing. But you didn't have to give away the source code, so you can still ask people to sign up for your $5 monthly membership which grants access to all source code projects as downloads. Of course, your dear readers could also manually type in all the source code shown in the Carbon images, but at that point lazyness kicks in and they pay the $5. My personal opinion is that knowledge should be shared, so I'm not sure if I consider such an approach good for our craft. But I can understand the business model that is created by having a tool such as this, which allows indie developers to earn a passive income from tutorials. The next logical iteration is then to put your source code screenshots into a video, e.g. https://gorails.com/ https://gorails.com/
- 3stadt 6y ago
  It's more useful for tweets, you have to use an image there.
- trishmapow2 6y ago
  Next HN post - UnCarbon: easy bulk OCR of source code. Ligatures would be a bit annoying to deal with, but shouldn't be too hard to get around... and once one person uploads the code as text everyone has access.
  - fxtentacle 6y ago
    Probably that would get an amazing success rate, because source code has both a limited vocabulary and a formal grammar.
jp1016 6y ago
I have created a similar tool https://codekeep.io/screenshot https://codekeep.io/screenshot, which has pre made templates for code screenshot , for eg: notes - where you have description , title and code, good/evil - which can be used to distinguish between good and bad coding practices, and it can be used along with the service of codekeep, you can store your snippets on codekeep and instantly create screenshot from it. a short description of codekeep below, ️ CodeKeep, Combining features from Google Keep to better organise your code snippets by tagging them with labels and categorising into folders.Tagline: Organize , Discover and Share Code Snippets. https://codekeep.io https://codekeep.io let me know your thought
- alibaba_x 6y ago
  Does anyone actually buy the paid version of your tool?
genezeta 6y ago
I've been using Carbon more frequently lately in some development documents in my current team. We have a MediaWiki and, for some reason, the administrator wouldn't be bothered to set up syntax highlighting correctly. So, after asking a number of times, I thought I would just use Carbon and be done with it and have the docs looking a bit nicer. Immediately, I thought about the issue of having code as images. You put an example in the docs but the developers can't just copy and paste it into their code. But then I realized I actually wanted this. I didn't want them to continue copy&pasting code without understanding a single thing they do, like they have been doing for the last twelve years. I have it set up to remove the window frame and background, and use Iosevka. It's much less noisy that way.
- jlengrand 6y ago
  The corollary of that though is that your code is also not accessible. I've been struggling with this myself, I don't find it fair that my snippets, no matter how beautiful, aren't readable by screen readers. The only solution I found is to keep providing actual code as a snippet or gist next to the image.
  - jlengrand 6y ago
    Ha, reading the doc it seems it is at least partly improved since last time I checked. Good news then! https://github.com/carbon-app/carbon#exportsharing https://github.com/carbon-app/carbon#exportsharing
  - genezeta 6y ago
    I understand that, and in a different setting I wouldn't use images for code no matter what. In this case though, as I said, the setting is very controlled (internal, temporary docs) and I explicitly did not want it to be easy to copy.
    - yawaramin 6y ago
      Accessibility of the code should trump that. Stuff that we like to call 'temporary' inevitably ends up as long-term, and we have no idea what will really happen to it in future.
politelemon 6y ago
I'm of the opinion that showing window controls (the top left/right buttons) and the window chrome on a code snippet is poor form. The focus of the screenshot is to be the code itself, there is no need to highlight the crud around it which is distracting to users coming from different OSes. It is reminiscent of of various sites that showcase their products on specific phones and laptops. You're wasting valuable space on something that appears dated and cringey just a few months down the line. A well put-together div, font and background will last longer.
- yreg 6y ago
  Just noting, you hide window controls in settings.
  - danielecook 6y ago
    How do you hide them? I see an option for that.
    - chrisa 6y ago
      Use the gear to open settings, then under "Window >" turn off "Window Controls"
- throwlaplace 6y ago
  It's an affordance - it signals immediately to the reader that the block of text is source code https://en.wikipedia.org/wiki/Affordance https://en.wikipedia.org/wiki/Affordance Best example of affordance is handles on doors: horizontal spanning the whole door for push to open and vertical for pull to open.
  - ken 6y ago
    No, it's the opposite. > "In 1988, Donald Norman appropriated the term affordances in the context of human–machine interaction to refer to just those action possibilities that are readily perceivable by an actor." Putting a door handle on a door is an affordance: you can see how to open the door (action). Putting window controls on something that's not a window and can't be controlled as such is not an affordance: it's misleading. There's no action to be perceived here.
jadia 6y ago
I've recently started using this in my presentation slides. I use Carbon when I feel like putting some make-up on my slides.
dang 6y ago
Url changed from https://github.com/carbon-app/carbon https://github.com/carbon-app/carbon, which points to this.
duiker101 6y ago
Inspired by Carbon I made a tool that I think complements it to obtain the same effect but on screenshots rather than text. https://graphite-shot.now.sh https://graphite-shot.now.sh You can see how it works in the Tweet where I announced it. https://twitter.com/Duiker101/status/1241657523825934338 https://twitter.com/Duiker101/status/1241657523825934338
- ryall 6y ago
  This is _very_ cool. You should make it more obvious that you match the background colour automatically, I don't think I would've even tried it if I hadn't seen that comment on twitter.
  - duiker101 6y ago
    Thanks for the suggestion! I'll add it to the page! Now that I think about it I should probably have some example or something to see what it's about because I am realising it's not really clear when you open the page
polm23 6y ago
So an unfortunate reality of the world today is that sometimes you need an image for a post that doesn't need a photograph, if only for better exposure with embeds. This is great for that. It's also great for posting code on Twitter. I see a lot of people complaining about not being able to copy-paste code. That's a legitimate issue. As chrisma0 pointed out, the URLs can have a one-to-one correspondence with gists, so in blog posts you can just link directly to gists with little loss of convenience. Also note that it seems to use Twitter's alt text correctly at least. An even better option would be to use a steganographic technique like pico-8 carts do to embed the text and then use an extension (or oembed or something) to surface that where appropriate. pico-8 cart details: https://pico-8.fandom.com/wiki/P8PNGFileFormat https://pico-8.fandom.com/wiki/P8PNGFileFormat
bastijn 6y ago
For me it would be worth more if the tool would make sure it would always have line breaks at places which enhance readability instead of only responsive to screen size. The single feature I would want from a tool as carbon is making captures of source code that would aways be super readable, no matter which device my audience reads it. The sample on an iPhone is completely the opposite breaking at my small width making a single line stretch over 4 rows, broken at random points where my screen ended. It should smartly take my screen size into consideration and find a optimal balance between font size, line breaks and readability. I'm fine doing some small horizontal scrolling if that would improve readability. Kind of a "prettier" for sharing code automatically running when a reader reads it on any device.
franky47 6y ago
For VSCode users: I've been using the CodeSnap [1] extension which lets you do similar code screenshots without leaving the editor. [1] https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap https://marketplace.visualstudio.com/items?itemName=adpyke.c...
KayL 6y ago
This site should warn us the code posted to public https://twitter.com/carbon_noreply https://twitter.com/carbon_noreply Looking for a way to copy the code, eg. https://carbon.now.sh/#code-ID https://carbon.now.sh/#code-ID
- jcims 6y ago
  Seems like it's 95% the default example, 4% real code/content and 1% nsfw ascii art.
- genezeta 6y ago
  As far as I know, it is not posted there unless you actually do it yourself, pressing the "Tweet" button. You can also get a link if you choose "Export -> Open". It will open a new window/tab with the URL of the generated image.
tehsauce 6y ago
I can't understand why a screenshot tool would generates the macos window UI.
dylan604 6y ago
So, this is for people unable to take a proper screen cap?
tsumnia 6y ago
I don't use Carbon, but I would say I endorse using images to help prevent copy/pasting of source code. My last research paper [1] studied the results from students that completed optional typing exercises while learning Java. In summary, students labeled as "Completers" of typing exercises earned higher final course grades, "Completers" that also scored below the median on their first exam showed the highest learning gains on their final exam, and practicing typing exercises reduced the number of build failures these students saw in programming programs. If you are looking for other methods for creating images, you can always go simple screenshotting. For my research, I use a combination of Dom-to-image [2] and CodeMirror [3] so that I can generate images from the CodeMirror interface which students also use to retype the code. [1] https://go.ncsu.edu/typing-exercises https://go.ncsu.edu/typing-exercises [2] https://github.com/tsayen/dom-to-image https://github.com/tsayen/dom-to-image [3] https://codemirror.net/ https://codemirror.net/
Saurabhjain507 6y ago
Ok. This is what the cool folks of Twitter use I guess. Thank you for sharing.

247 points by polm23 6y ago

Neat! So this is the kind of tool all those hip programmer folks on Twitter use :) I especially like that it works directly with GitHub gist IDs (https://carbon.now.sh/c4ad9e84088d867a2b4670c3dc50e67a https://carbon.now.sh/c4ad9e84088d867a2b4670c3dc50e67a) and that the tool considers making the image accessible for people through image descriptions: https://help.twitter.com/en/using-twitter/picture-descriptions https://help.twitter.com/en/using-twitter/picture-descriptio...

searchableguy 6y ago
And I hate it because you can't copy paste code from a picture. It's going backwards unless it's just a few lines. I cry because all those medium, blogs, devto etc articles are using it.
- cryo 6y ago
  Maybe providing a copy button next to the screenshot, or a toggle to get the actual text would help.
- bArray 6y ago
  Perhaps it could be output as an SVG with an embedded image in the background? That way you could still have the image and copy-able text. EDIT: Seems to output SVGs, they just aren't well supported right now: https://github.com/carbon-app/carbon/issues/943 https://github.com/carbon-app/carbon/issues/943

erwinh 6y ago

Super love the design of this, _630w does have a point though. Would be great if there is a way to add copy-paste to something like this. Maybe through some accessibility feature it's possible?

fxtentacle 6y ago

How useless. 1. With the current design standards, "beautiful code" just means lots of useless whitespace everywhere. Code should be compact and functional, not airy. 2. It breaks copy & paste, so this is really only useful for showing off, but not for actually communicating about code or writing tutorials. 3. This tool has lower contrast and lower readability than black text on a white background. Combined, it's a tool for bragging about the wrong metric while excluding the elderly.

fooker 6y ago
>Code should be compact and functional, not airy. Airy and functional seems better for readability.
- fxtentacle 6y ago
  If I had to choose between 2 screens full of source code with lots of whitespace, or half of a screen condensed, I'd always choose the variant that fits on my screen. So my personal preference is strongly against airy and more like "cram what you can into one line". But given the quick downvotes to my parent post, it seems I'm in the minority with my view that source code should be first and foremost useful.
  - touktouk 6y ago
    It is quite possible that people agree with you that source code should be first and foremost useful, but disagree on compactness vs airiness.
  - fooker 6y ago
    >cram what you can into one line This is how code gets thrown away and rewritten. Fixing bugs in dense code is a nightmare, if the code was written by someone else.
tsumnia 6y ago
> Code should be compact and functional, not airy. I would have to disagree for similar reasons to fooker. > It breaks copy & paste, ... not for actually communicating about code or writing tutorials. I posted it in another respond, but my research shows retyping code can be beneficial for learning. This extends to pre-internet coding books where that was the only way to recreate the code and Zed Shaw's "Learn Python the Hard Way" [1] where he explicitly states "You must type each of these exercises in, manually. If you copy and paste, you might as well not even do them." [1] https://learnpythonthehardway.org/python3/intro.html https://learnpythonthehardway.org/python3/intro.html

obituary_latte 6y ago

https://carbon.now.sh/ https://carbon.now.sh/ For a demo. Wasn’t clear from readme on quick blush that there was a live demo.

_ZeD_ 6y ago

how can I have windows' window buttons? I can choose between 3 combination but all of them are on the wrong part

saagarjha 6y ago

I’m glad that this gives better results than screenshots of code but, to be honest, a bit saddened that it has to exist at all. Twitter, I get a little: it’s meant for short thoughts and can’t really work well for code, but Medium (for example) not supporting code is hard to understand.

cyberferret 6y ago
AFAIK, Medium does support embedded Gists from GitHub etc. At least it did when I last wrote a programming guide in it. Update: Still seems that it does (scroll down) [0] Edit: Oops, I just remembered that HackerNoon moved off Medium to their own CMS, but those Gists did used to work on Medium too, complete with code formatting. [0] - https://hackernoon.com/building-a-face-recognition-web-app-in-under-an-hour-345aa91487c https://hackernoon.com/building-a-face-recognition-web-app-i...
- oefrha 6y ago
  Supporting embedded gists is hardly "supporting code". We're talking about fetching one additional iframe plus a third party script per code blob, for what should be inline HTML plus ~30 lines of CSS (check out pandoc rendered HTML with syntax highlighting, for instance). The page you linked also demonstrates visually broken embeds with extraneous white space on the bottom; hardly a glowing endorsement. I get embedding Codepens and stuff for rendered code. Embedding gists for static, verbatim code is just sad. (Not saying it doesn't have its uses, but having to use it is another matter.) But this is far from the most annoying thing about Medium, so meh.
yawaramin 6y ago
Medium is not a technical blogging platform. Try dev.to, it has excellent syntax highlighting.
soonnow 6y ago
Medium does support code, without highlighting though and only accessible through unobvious keys: To begin a code block, go to a new line and type ``` (triple backtick). For inline code in a paragraph, type a single backtick ` to begin and end your code. Or highlight some text and press the backtick key.

gorgoiler 6y ago

Is there a good free equivalent of SF Mono with which I could use this? I believe the license for SF Mono restricts usage to non commercial iOS / macOS work. It’s my favourite typeface for code by far. I enjoy the sort of 1980s “Unix Manual” width of it. Sort of like the writing on architecture plans, which in the last would have been drawn by a plotter. The face in Carbon is close but had too many distracting letter forms for presenting content.

saagarjha 6y ago
I like Menlo as a fallback; it’s fairly clean and not particularly flashy. I’ll admit I haven’t looked at the licensing for it though; I know it ships with macOS and is almost certainly under a less restrictive license than SF Mono but it might not be as usable as you’d like. I think it’s based on DejaVu which is fairly permissive if you’re OK with a similar (if slightly less polished, IMO) font.
baddox 6y ago
I don’t know much about typefaces, but Roboto Mono looks fairly similar to me.
Bishonen88 6y ago
Perhaps not suuuper alike, but I found the jetbrains font to actually be awesome: https://www.jetbrains.com/lp/mono/ https://www.jetbrains.com/lp/mono/
- imedadel 6y ago
  Surprisingly, setting JetBrains Mono to 13px in the editor is still way more readable than any other font. Especially on Windows.

cyberferret 6y ago

Been using Carbon for quite a while now when illustrating code in my blog posts or on Twitter etc. It is even on my Chrome shortcuts bar. Copy and paste aside, it is ideal for showcasing important bits of code such as variable or function names that you want to stand out for illustrative purposes. It is a wonderful teaching tool. In any case - who wants to be a copy and paste programmer?? </wink>

petepete 6y ago
Who wants people with visual impairments to read their posts?
- anthonybullard 6y ago
  It's called ALT text. If you don't paste the same source in the alt attribute, that's the problem. Not having a nice image for sighted folks.
  - petepete 6y ago
    Alt text certainly wasn't intended for this kind of use. Screen readers don't cope with newlines in alt text particularly well, most just stop at the end of a line[0]. Also more care has to be taken when escaping the contents of the attribute, it's something people will definitely get wrong. [0] https://developer.paciellogroup.com/blog/2015/09/short-note-on-coding-alt-text/ https://developer.paciellogroup.com/blog/2015/09/short-note-...
ljm 6y ago
The MacOS app Deckset has a pretty sweet syntax highlighting feature where you can selectively highlight smaller parts of the code in that way, and then step through it as an animation. And at least you've got the original markdown and PDF/HTML exports for extra accessibility.

oefrha 6y ago

I learned about Carbon maybe three years ago. Back then the README example looked like this: https://user-images.githubusercontent.com/10369094/30791512-cb001438-a167-11e7-952b-f0f0e5c4499e.png https://user-images.githubusercontent.com/10369094/30791512-... Now it looks like https://user-images.githubusercontent.com/8397708/63456416-b27d1a80-c403-11e9-9572-105b089be885.png https://user-images.githubusercontent.com/8397708/63456416-b... complete with weird cursive font and all. IMO this niche obsession with cursives, ligatures and stuff in programming fonts actually hurts first impression for a significant percentage of people landing on this README.

amake 6y ago
In what sense is the latter font "cursive"?
- gilnaa 6y ago
  I think he refers to the ligatures
- saagarjha 6y ago
  I’ve seen actual cursive code fonts (just one, I think. Maybe someone knows which one I’m talking about) and this isn’t it. I’m assuming the stylized terminal/descender (particularly on the “t” and “f”) are probably what are causing it to be described this way. Edit: I’m blind and didn’t see the comment on the bottom :/ This is the cursive font I’m talking about.
  - oefrha 6y ago
    That’s <s>Operator</s> Dank Mono Italic.
    - saagarjha 6y ago
      It’s great to finally know what that font is. (And avoid it personally, to be honest…)

pcr910303 6y ago

For people who find the default padding too big(I did), you can control the presets with the Settings button - and if you want pixel-level control, you can export the carbon-config.json file from the Settings > Misc > Export config, edit in your favorite editor, and import it. I use a padding of 12px, instead of the (IMO) super big 56px.

pknerd 6y ago

Wish there was an HTML export option for blog posts.

fxtentacle 6y ago

While I felt highly sceptical at first, I have now learned that this is an amazing sales preview tool for source code tutorials. Inside the article, all source code is posted as images using Carbon. That way, your readers can follow along and understand what you're doing. But you didn't have to give away the source code, so you can still ask people to sign up for your $5 monthly membership which grants access to all source code projects as downloads. Of course, your dear readers could also manually type in all the source code shown in the Carbon images, but at that point lazyness kicks in and they pay the $5. My personal opinion is that knowledge should be shared, so I'm not sure if I consider such an approach good for our craft. But I can understand the business model that is created by having a tool such as this, which allows indie developers to earn a passive income from tutorials. The next logical iteration is then to put your source code screenshots into a video, e.g. https://gorails.com/ https://gorails.com/

3stadt 6y ago
It's more useful for tweets, you have to use an image there.
trishmapow2 6y ago
Next HN post - UnCarbon: easy bulk OCR of source code. Ligatures would be a bit annoying to deal with, but shouldn't be too hard to get around... and once one person uploads the code as text everyone has access.
- fxtentacle 6y ago
  Probably that would get an amazing success rate, because source code has both a limited vocabulary and a formal grammar.

jp1016 6y ago

I have created a similar tool https://codekeep.io/screenshot https://codekeep.io/screenshot, which has pre made templates for code screenshot , for eg: notes - where you have description , title and code, good/evil - which can be used to distinguish between good and bad coding practices, and it can be used along with the service of codekeep, you can store your snippets on codekeep and instantly create screenshot from it. a short description of codekeep below, ️ CodeKeep, Combining features from Google Keep to better organise your code snippets by tagging them with labels and categorising into folders.Tagline: Organize , Discover and Share Code Snippets. https://codekeep.io https://codekeep.io let me know your thought

alibaba_x 6y ago
Does anyone actually buy the paid version of your tool?

genezeta 6y ago

I've been using Carbon more frequently lately in some development documents in my current team. We have a MediaWiki and, for some reason, the administrator wouldn't be bothered to set up syntax highlighting correctly. So, after asking a number of times, I thought I would just use Carbon and be done with it and have the docs looking a bit nicer. Immediately, I thought about the issue of having code as images. You put an example in the docs but the developers can't just copy and paste it into their code. But then I realized I actually wanted this. I didn't want them to continue copy&pasting code without understanding a single thing they do, like they have been doing for the last twelve years. I have it set up to remove the window frame and background, and use Iosevka. It's much less noisy that way.

jlengrand 6y ago
The corollary of that though is that your code is also not accessible. I've been struggling with this myself, I don't find it fair that my snippets, no matter how beautiful, aren't readable by screen readers. The only solution I found is to keep providing actual code as a snippet or gist next to the image.
- jlengrand 6y ago
  Ha, reading the doc it seems it is at least partly improved since last time I checked. Good news then! https://github.com/carbon-app/carbon#exportsharing https://github.com/carbon-app/carbon#exportsharing
- genezeta 6y ago
  I understand that, and in a different setting I wouldn't use images for code no matter what. In this case though, as I said, the setting is very controlled (internal, temporary docs) and I explicitly did not want it to be easy to copy.
  - yawaramin 6y ago
    Accessibility of the code should trump that. Stuff that we like to call 'temporary' inevitably ends up as long-term, and we have no idea what will really happen to it in future.

politelemon 6y ago

I'm of the opinion that showing window controls (the top left/right buttons) and the window chrome on a code snippet is poor form. The focus of the screenshot is to be the code itself, there is no need to highlight the crud around it which is distracting to users coming from different OSes. It is reminiscent of of various sites that showcase their products on specific phones and laptops. You're wasting valuable space on something that appears dated and cringey just a few months down the line. A well put-together div, font and background will last longer.

yreg 6y ago
Just noting, you hide window controls in settings.
- danielecook 6y ago
  How do you hide them? I see an option for that.
  - chrisa 6y ago
    Use the gear to open settings, then under "Window >" turn off "Window Controls"
throwlaplace 6y ago
It's an affordance - it signals immediately to the reader that the block of text is source code https://en.wikipedia.org/wiki/Affordance https://en.wikipedia.org/wiki/Affordance Best example of affordance is handles on doors: horizontal spanning the whole door for push to open and vertical for pull to open.
- ken 6y ago
  No, it's the opposite. > "In 1988, Donald Norman appropriated the term affordances in the context of human–machine interaction to refer to just those action possibilities that are readily perceivable by an actor." Putting a door handle on a door is an affordance: you can see how to open the door (action). Putting window controls on something that's not a window and can't be controlled as such is not an affordance: it's misleading. There's no action to be perceived here.

jadia 6y ago

I've recently started using this in my presentation slides. I use Carbon when I feel like putting some make-up on my slides.

dang 6y ago

Url changed from https://github.com/carbon-app/carbon https://github.com/carbon-app/carbon, which points to this.

duiker101 6y ago

Inspired by Carbon I made a tool that I think complements it to obtain the same effect but on screenshots rather than text. https://graphite-shot.now.sh https://graphite-shot.now.sh You can see how it works in the Tweet where I announced it. https://twitter.com/Duiker101/status/1241657523825934338 https://twitter.com/Duiker101/status/1241657523825934338

ryall 6y ago
This is _very_ cool. You should make it more obvious that you match the background colour automatically, I don't think I would've even tried it if I hadn't seen that comment on twitter.
- duiker101 6y ago
  Thanks for the suggestion! I'll add it to the page! Now that I think about it I should probably have some example or something to see what it's about because I am realising it's not really clear when you open the page

polm23 6y ago

So an unfortunate reality of the world today is that sometimes you need an image for a post that doesn't need a photograph, if only for better exposure with embeds. This is great for that. It's also great for posting code on Twitter. I see a lot of people complaining about not being able to copy-paste code. That's a legitimate issue. As chrisma0 pointed out, the URLs can have a one-to-one correspondence with gists, so in blog posts you can just link directly to gists with little loss of convenience. Also note that it seems to use Twitter's alt text correctly at least. An even better option would be to use a steganographic technique like pico-8 carts do to embed the text and then use an extension (or oembed or something) to surface that where appropriate. pico-8 cart details: https://pico-8.fandom.com/wiki/P8PNGFileFormat https://pico-8.fandom.com/wiki/P8PNGFileFormat

bastijn 6y ago

For me it would be worth more if the tool would make sure it would always have line breaks at places which enhance readability instead of only responsive to screen size. The single feature I would want from a tool as carbon is making captures of source code that would aways be super readable, no matter which device my audience reads it. The sample on an iPhone is completely the opposite breaking at my small width making a single line stretch over 4 rows, broken at random points where my screen ended. It should smartly take my screen size into consideration and find a optimal balance between font size, line breaks and readability. I'm fine doing some small horizontal scrolling if that would improve readability. Kind of a "prettier" for sharing code automatically running when a reader reads it on any device.

franky47 6y ago

For VSCode users: I've been using the CodeSnap [1] extension which lets you do similar code screenshots without leaving the editor. [1] https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap https://marketplace.visualstudio.com/items?itemName=adpyke.c...

KayL 6y ago

This site should warn us the code posted to public https://twitter.com/carbon_noreply https://twitter.com/carbon_noreply Looking for a way to copy the code, eg. https://carbon.now.sh/#code-ID https://carbon.now.sh/#code-ID

jcims 6y ago
Seems like it's 95% the default example, 4% real code/content and 1% nsfw ascii art.
genezeta 6y ago
As far as I know, it is not posted there unless you actually do it yourself, pressing the "Tweet" button. You can also get a link if you choose "Export -> Open". It will open a new window/tab with the URL of the generated image.

tehsauce 6y ago

I can't understand why a screenshot tool would generates the macos window UI.

dylan604 6y ago

So, this is for people unable to take a proper screen cap?

tsumnia 6y ago

I don't use Carbon, but I would say I endorse using images to help prevent copy/pasting of source code. My last research paper [1] studied the results from students that completed optional typing exercises while learning Java. In summary, students labeled as "Completers" of typing exercises earned higher final course grades, "Completers" that also scored below the median on their first exam showed the highest learning gains on their final exam, and practicing typing exercises reduced the number of build failures these students saw in programming programs. If you are looking for other methods for creating images, you can always go simple screenshotting. For my research, I use a combination of Dom-to-image [2] and CodeMirror [3] so that I can generate images from the CodeMirror interface which students also use to retype the code. [1] https://go.ncsu.edu/typing-exercises https://go.ncsu.edu/typing-exercises [2] https://github.com/tsayen/dom-to-image https://github.com/tsayen/dom-to-image [3] https://codemirror.net/ https://codemirror.net/

Saurabhjain507 6y ago

Ok. This is what the cool folks of Twitter use I guess. Thank you for sharing.