
Carbon: Create and share images of source code - polm23
https://carbon.now.sh/
======
oefrha
I learned about Carbon maybe three years ago. Back then the README example
looked like this: [https://user-
images.githubusercontent.com/10369094/30791512-...](https://user-
images.githubusercontent.com/10369094/30791512-cb001438-a167-11e7-952b-f0f0e5c4499e.png)

Now it looks like [https://user-
images.githubusercontent.com/8397708/63456416-b...](https://user-
images.githubusercontent.com/8397708/63456416-b27d1a80-c403-11e9-9572-105b089be885.png)
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.

~~~
nurettin
Obsession with dark, unreadable text colors are much more destructive to my
eyes than cursives. Whoever came up with the idea that blue on black was a
good color for displaying code on a screen, or dark green on black was a good
idea for comments should just stop using computers together with everyone who
installs and uses those themes.

~~~
leotaku
I mean, everyone should be able to use themes that they are comfortable with,
right? I don't think there is any evidence for dark themes "destroying"
anyones eyes. And even if there was, I think you'd be able to survive looking
at a Screenshot for some trendy JS project.

~~~
dr_zoidberg
For me, dark themes help reduce eye strain, particularly at night or if I've
been staring at the screen for a long while already. But I don't judge others
for picking color themes which are comfortable for them. Your screen, your
rules.

------
politelemon
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.

~~~
throwlaplace
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
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.

~~~
throwlaplace
... these code screen caps are inserted into presentations not demos?? As far
as I know no audience member expects to walk up to the projector screen and
minimize a window. The point is to prime someone's perception for how they
should interpret something. Good try being completely literal though.

edit: i can't believe i have to explain this. the window serves exactly the
same purpose as offsetting code blocks in text in a different font, in a
different color, with a different background: it's to indicate that there's
something meta-semantically distinct about this block of text from other
blocks of text. to contextualize the code even moreso accomplishes the same
goal - implicitly communicating distinction.

~~~
matheusmoreira
> The point is to prime someone's perception for how they should interpret
> something.

And what perception is that?

The macOS semaphore controls make the square look like a macOS window. Not all
windows are text editors: people still have to look at the content of the
window in order to understand it. Not all text editing is source code editing:
people still have to read the text in order to realize it's source code. The
Carbon twitter contains images of error logs and ASCII art.

Monospaced typefaces and syntax highlighting of the text are the design
features that truly denote source code. A container with contrasting
background color distinguishes the source code from the other elements on the
page or slide.

> the window serves exactly the same purpose as offsetting code blocks in text
> in a different font, in a different color, with a different background: it's
> to indicate that there's something meta-semantically distinct about this
> block of text from other blocks of text.

They don't have the same purpose. The information conveyed by all of those
elements are completely different. Monospaced, syntax highlighted text looks
like source code to any programmer. Placing that text inside a container
allows it to be quickly distinguished from the surrounding prose.

Adding macOS controls to this design makes it look like source code _that 's
being edited in macOS_. Why convey those additional bits of information? Does
the code not work outside of macOS? Are users of other systems not part of the
target audience? Is the author subtly signaling their use of macOS to other
macOS users in the audience?

------
genezeta
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
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.

~~~
genezeta
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.

~~~
jlengrand
Not saying you're doing any evil :). Those might not be yours to fix, but one
could argue that if copy/pasting is such a problem in your current environment
there are deeper issues at hand. Nothing that carbon will fix, and nothing
that accessibility will helps with in any case. Good luck!

~~~
genezeta
Oh, sure. There _are_ much deeper problems in that project.

Thanks.

------
saagarjha
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
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-i...](https://hackernoon.com/building-a-face-recognition-web-app-in-under-
an-hour-345aa91487c)

~~~
oefrha
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.

------
KayL
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)

~~~
genezeta
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.

------
polm23
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)

------
jp1016
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
Does anyone actually buy the paid version of your tool?

------
franky47
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.c...](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)

------
duiker101
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
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
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

------
erwinh
Super love the design of this, @searchableguy 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?

------
tsumnia
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/)

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

------
gorgoiler
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.

~~~
Bishonen88
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
Surprisingly, setting JetBrains Mono to 13px in the editor is still way more
readable than any other font. Especially on Windows.

------
fxtentacle
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/)

~~~
trishmapow2
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
Probably that would get an amazing success rate, because source code has both
a limited vocabulary and a formal grammar.

------
bastijn
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.

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

------
chrisma0
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-
descriptio...](https://help.twitter.com/en/using-twitter/picture-descriptions)

~~~
searchableguy
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.

~~~
bArray
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)

------
obituary_latte
[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.

------
cyberferret
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
Who wants people with visual impairments to read their posts?

~~~
anthonybullard
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
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-...](https://developer.paciellogroup.com/blog/2015/09/short-note-on-
coding-alt-text/)

------
pcr910303
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
Wish there was an HTML export option for blog posts.

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

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

------
dang
Url changed from [https://github.com/carbon-
app/carbon](https://github.com/carbon-app/carbon), which points to this.

------
fxtentacle
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
>Code should be compact and functional, not airy.

Airy and functional seems better for readability.

~~~
fxtentacle
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.

~~~
fooker
>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.

