I don't understand why there are many negative comments in this thread to this project. I've used Carbon many times to paste good-looking code in a PowerPoint presentation, and the result is clean and attractive. Big thank you to the people behind it.

I've rarely seen people being very positive about any product in a Hackernews thread.

[0] Coinbase : https://news.ycombinator.com/item?id=26816636

To be fair, a lot of the criticism is constructive in nature (not all of it, of course). Personally, I'd prefer that to pats-on-the-back.

Don't forget that comment about Dropbox: https://news.ycombinator.com/item?id=9224

This is because sacred "carbon" word used outside climate hoax scope. Hence the negative reaction from radical environmentalists (we've got an infestation here).

I'm not an SVG expert, but surely that shouldn't be a 1.1 MB export?

I just quickly created a text-based SVG image in Inkscape, and it was a few KB in size and the text was all selectable. I couldn't even open the Carbon SVG export in Inkscape, so I'm not sure what it's doing?

You certainly didn't embed a >300KB font[1] in your few KB SVG image? If you don't embed the font, other people without the font will simply see something different.

The uncompressed 1.1MB export isn't optimized for size since it repeats basically the same CSS styles over and over for every token. When gzipped (default level) it's 302KB, and when brotli'ed it's 290KB, basically the font takes all the space.

Of course, technically it's possible to optimize the size by creating a custom font with only the glyphs needed, like what people used to do for icon fonts.

[1] https://sourcefoundry.org/hack/

Well you definitely can prune the font to ASCII. Enything outside of that can be exported as vector graphics. That would shave off plenty of space.

I don't think you can really export a font to SVG vector graphics if you want it to look good at low resolutions. You will lose all of the hinting information. The best option is probably glyph culling which should be not much larger, it may even be smaller in many cases.

The myriad stylistic options including different types of functionally useless window controls and drop shadow clearly says it's partly an art project.

If "it is code, not an art project" to you, the only thing I can say is you're not the target audience.

Yep the default example is a 1.1MB SVG. This website manages to inflate the original content over 3000x.

So... It posts code as an image and prevents search and copy-paste?

It does more than export an image, see here: https://github.com/carbon-app/carbon#exporting--sharing

It was made for Twitter where posting code is not possible.

and it does automatically add alt text on Twitter so it's better than screenshots.

I like this idea. I created a similar script for myself that extends this idea more into the CI/CD realm.

Basically if you have tutorials that need code screenshots it's nice to avoid much / most manual copy/paste/screen capture etc.

So my script takes a filename and line numbers and outputs a syntax highlighted screenshot of that portion of text.

Why arn't I linking to the script? Well the obvious next step is to extend the above to tie into git such that for minor changes you don't have to think about the line numbers and it just does the right thing. But I never got that working :)

Dear reader, what local alternative would you recommend?

I've documented a few of the alternatives, including Carbon, on my website if you're interested.

https://www.marclittlemore.com/create-pretty-code-screenshot...

If you use VS Code, there are some decent plugins you can use like Polacode. I also like Screely for turning screenshots into browser mockups too.

In case you weren't aware of it, MacOS also has a `Shift + Cmd + 5` screenshot shortcut that allows for more configuration (save location; whether to capture the full screen, a window, or a specific area of the screen; and whether to capture an image or a video) - in particular, I find that the screen area capture is better than using `Shift + Cmd + 4`, because you can adjust where the edges of the box are before capturing, rather than needing to get spacing right in one go with the crosshairs.

Nice! I'll document that too. Thanks for sharing.

Your text editor.

How do I go about upscaling screenshots taken in Windows so that they look good on high DPI screens? Thanks.

Don't know about Windows but on Linux I spawn an X session with a virtual framebuffer and arbitrary resolution, spawn a browser there pointed at URL and make a screenshot.

ctrl + '+'. Increase the font size.

Was going to suggest this. Make it take up more space on your screen, that's more pixels in the same pic. You might need to do that anyway, if you're on an unusually low (nowadays) resolution: Otherwise the whole pic will be too small to make stuff out on high-res screens.

Increase your screen resolution?

Ah yes. I'll do that right after I download more RAM.

...

It's already maxed out.

no, increase virtual screen size

If you use vscode, maybe you could try this one: https://marketplace.visualstudio.com/items?itemName=pnp.pola...

Petrify https://www.dangercove.com/petrify/

If you're on Mac, there's this really neat trick you can use to create images of your code:

  cmd + shift + f4

Spawn an X session with a virtual framebuffer and arbitrary resolution, spawn a VScode instance and make a screenshot.

Ctrl-C

Ctrl-V

Twitter has no code syntax highlighting and only allows up to 280 characters.

No, Ctrl-C in Snipping Tool (or whatever you use for screenshots).

Is anyone else bothered by the close/minimize/maximize buttons in the upper left corner which are there for no apparent reason other than to associate with macos’ design?

In settings you can change them to windows' style buttons.

I don't think the style of the buttons was the point of OP's comment - they're useless on an image, is all.

I think the window design is to give the aesthetic that it's a screenshot from your code editor on your computer.

My editor looks nothing like that

I don't see much difference from screenshotting particular area of an editor.

It's possible to turn them off too

#triggered

Carbon's been trending recently. Seems like everyone and their mother is using it. Can't complain, though... Looks great!

And not just use a screen snipping tool? Not sure I get it.

> Embed a snippet

> This is the recommended method for sharing Carbon on your own website or blog. Readers can even copy the code with the click of a button.

Snipping tool can't do that

Assign a shortcut key to it, then it's a keypress plus a button click.

yes but then you have to share both the picture and the code... or maybe I don't understand what you mean

Yup, true, I was thinking only pic.

It can generate an SVG image so it scales well on all devices (from cheap android phones to 5K Apple displays to Times Square billboards).

There's one, can you copy text from an SVG image posted on twitter or do they convert it to PNG themselves?

You can't select text from an SVG embedded as an image. Twitter is unlikely to include a multi-MiB SVG directly in the DOM for your copying convenience.

I think the benefit is consistency. If you need to share multiple pictures of code on Twitter or something, you won’t want to spend the time resizing your window and scrolling text into position just so. I don’t think the target audience is people who need a quick one-off screenshot

Arguably it's more aesthetic than most editors.

What's the difference between this and the MacOS app Petrify [0]. In the Petrify blog they talk about renaming from Carbonize [1] which I assume is related to the Carbon mentioned here? Are they the same team? Is somebody repackaging another app?

[0] https://apps.apple.com/app/petrify/id1451177988

[1] https://www.dangercove.com/news/petrify-36/

According to the Petrify homepage [0]: "Credits for this go to the Carbon project that Petrify uses the open-source editor of." [0] https://www.dangercove.com/petrify/

I don't know if it's related, but Carbon is also the name of the pre-Cocoa MacOS windowing/UI library.

How many name collisions are there with a project named carbon?

I think that would be a cool project, if it doesn't already exist: crawl github, gitlab, bitbucket, sourceforge, etc -- and report project name collisions.

name it carbon lol

I find the lack of a Gruvbox theme disturbing on many levels!

A slightly-related project I created: TypeScript Call Graph - generate/visualize a call graph of your TypeScript files in a variety of ways. MIT open source ;)

https://github.com/whyboris/TypeScript-Call-Graph

Hey folks! Personally I used Carbon quite some times in the past, but I saw some possible improvements and also thought about further additions such a product could have.

That's why a friend and me released a similar product available at snappify.io, maybe someone finds it interesting!

Do they host the image?

I do this with cmd+shift+4 and it's already on my clipboard for easy pasting into chat or whatever. Plus the line numbers are correct and the highlighting matches my editor.

This offers functionality like the readers being able to copy and paste the code, you can't do that with cmd+shift+4 because that creates just an image file

This is indeed beautiful, but I'm missing some real bitmap fonts so that the code looks sharp, as it was meant to be, not with blurry "antialiased" fonts.

Looks are subjective, not all of us have the same tastes. The selection of themes and fonts seems extremely biased towards a certain look, no doubt the one that the author of carbon considers "beautiful". This is OK, but it could be a bit more representative.

Thanks for sharing, this looks very nice and quite polished.

This could be useful for my project.

What is the best way to import this into wordpress? Is there a to have it as a custom wordpress block?

What's the licensing of these images btw? That's not outlined anywhere. Am I free to use it for any purpose I like?

If it’s your code, wouldn’t an image of said code be a derived work, and as such you’d retain the copyright? I don’t think one could argue that a screenshot of a copyrighted work is a “transformative” use.

The only issue I can think of is any usage restrictions on the font.

IANAL.

I have been wondering for months how these snippets are done on hackthebox official writeups ^^

It’s sad that people don’t think about adding some attribution for the tools they use for free.

True. Unfortunately, adding a watermark might not encourage many people to use it widely without attribution.

That being said Carbon does allow you to add watermark to them. I wonder how many actually use that watermark.

Is there an API I can use to call this app instead of having to create the images manually?

reminds me that emacs used to have an html export with css formatting support ..

Why "used to have"? htmlfontify is built-in, htmlize is available from melpa (and used by scpaste, to upload it at once), org-mode has HTML export and code blocks with highlighting, and probably there's more.

because i know it had it but not sure it still has

Does anything ever really go away from Emacs?

The generated SVG renders for me as a 1750x782px transparent image. FF 95.

Thanks for veering off of the topic and letting us know you don't know a thing about functional programming, I guess?

I'd agree that it's off the topic, but they are correct in asserting that this is pretty naff code.

It's optimised to be terse rather than easily readable, which makes it poor code in my book.

Seems to be pretty typical implementations of `compose` and `unfold` functions. I don't think they are optimized to be terse, but I could be wrong.

I'd love to see your "easily readable" implementation of both those functions, if you have that at hand, with the same features as the ones in the example. My guess is that your implementation will look more or less the same.

For reference (in case the website changes), this is the code we're talking about:

    const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
    
    const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
    
    const unfold = (f, seed) => {
      const go = (f, seed, acc) => {
        const res = f(seed)
        return res ? go(f, res[1], acc.concat([res[0]])) : acc
      }
      return go(f, seed, [])
    }

3 function declarations in a single line already broke my ability to parse the first line :) It's not the first time that happens to me, so I suspect that it's simply a matter that my mental push-pop stack for comprehending tightly nested code layers has a depth of just 1, or maybe 2 after a coffee...

I'd reject all 3 of these in code review. `pluckDeep` and `unfold` are basically unreadable and don't make sense without comments ("go"? this is javascript!). "Pluck deep" sounds mildly disgusting and "unfold" I guess has some analogy to folding but I couldn't tell you what it is. `compose` gets a pass because function composition is a widespread concept and the argument is `fns`, which suggests that it is indeed function composition.

You should write comments anyway, of course, but you shouldn't also punish the reader by forcing them to break out a notebook and/or reformat the code just to make it make sense. The alternating `=` and `=>` is ugly and unnecessarily difficult to follow visually. And the lines in the first two functions are too long, like writing a long forum post in one big paragraph.

Here's what I'd rather see, leaving out the mandatory JSDoc comments (caveat: JS is not my main language):

    const getPropPath = (keyPath) =>
      (obj) => {
        return keyPath.split('.').reduce(
          (prevResult, nextKey) => prevResult[nextKey],
          obj,
        )
      }

    const compose = (...funcs) =>
      (x) => {
        return funcs.reduce(
          (prevResult, nextFunc) => nextFunc(prevResult),
          x,
        )
      }

    const unfold = (func, startArg) => {
      const unfoldAux = (func, currArg, accum) => {
        const result = func(currArg)
        if (result) {
          const nextArg = result[1]
          const nextAccum = accum.concat([result[0]])
          return unfoldAux(func, nextArg, nextAccum)
        } else {
          return accum
        }
      }
      return unfoldAux(func, startArg, [])
    }

Note especially how the mostly-identical structures of the first two functions is now visually obvious, whereas before it was obfuscated. Yes, it has more words than before, but it also limits the syntax to one `=>` per line and breaks up the needlessly dense use of the conditional operator in `unfold`. It's less visually noisy specifically because we added structure.

The original version might feel elegant and efficient to some people, but to me they look like someone else's shorthand scribbles. If I am writing something for other people to read, I am going to take the time to structure it for the benefit of the reader.

That said, I don't think I've ever needed a function like `unfold` (state machine? parsing?) in a Javascript program, so I'd place extra priority on making sure the doc comment explained what it's used for, ideally with a self-contained and easy-to-understand example.

You could also rewrite `unfoldAux` to remove the explicit `func` parameter and get it from the enclosing scope; that would be fine too IMO. That's a matter of taste, depending on how much you like closures.

"But wait! It would be just as terse in any real functional programming language! You're just a bad functional programmer!"

Yeah, I probably am a bad functional programmer. But here's how I'd write `unfold` in OCaml:

    let unfold func start_value = 
      let rec unfold_aux func curr_arg accumulator =
        match func curr_arg with
          | None -> accumulator
          | Some (result, next_arg) -> unfold_aux func next_arg (accumulator @ [result])
      in unfold_aux func start_value []

Obviously this is inefficient because `@` requires a linear scan over the data, so maybe it should be written with cons-and-reverse.

But I'd argue that the OCaml version has more or less the same structure and syntactical clarity as the Javascript version, but with the ability to take advantage of pattern matching (and taking a bit of liberty in narrowing down the opaquely truthy-or-not return value to a `None`).

As a bonus, here's a Python implementation, which uses the new structural pattern matching and looks quite a bit like the OCaml version:

    def unfold(func, start_value):
        def unfold_aux(func, curr_arg, accumulator):
            match func(curr_arg):
                case None:
                    return accumulator
                case (result, next_arg):
                    return unfold_aux(func, next_arg, accumulator + [result])
        return unfold_aux(func, start_value, [])

Of course, in Python nowadays I'd encourage adding type annotations, but that's another story.

It's for making images of code in a size constrained fashion, e.g. optimized for twitter; would you prefer code being cut off?

Scrollbar?

Text is better for accessibility and usability.

As capex shared, you get text too.

https://github.com/carbon-app/carbon#exporting--sharing

I could maybe understand the value of this if it were somehow impossible to display nicely styled code as text. But in the edit box they literally have the editor formatting the code. The image seems to be a snapshot of that.

The value is for displaying nicely formatted code in places that make it otherwise

> impossible to display nicely styled code as text

E.g. sharing snippets on Twitter, on blogging platforms that don't properly support code, in preview images for social media... Kind of a niche problem, but one that gets disproportionate visible attention because the people who produce lots of content about coding are the ones that have the most need for it. (Similar like how many programmers blogs have a good chunk about content about how they implemented their blog ;))

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

do checkout and let us know your thought :-) https://codekeep.io/screenshot