11 ms·
Create and share images of your source code
- edem 5y agoWhat's the licensing of these images btw? That's not outlined anywhere. Am I free to use it for any purpose I like?
- WalterGR 5y agoIf 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.
- agumonkey 5y agoreminds me that emacs used to have an html export with css formatting support ..
- defanor 5y agoWhy "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.
- aiNohY6g 5y agoDear reader, what local alternative would you recommend?
- toomanybeersies 5y agoIf you're on Mac, there's this really neat trick you can use to create images of your code: cmd + shift + f4
- powersnail 5y agoYour text editor.
- WalterGR 5y agoHow do I go about upscaling screenshots taken in Windows so that they look good on high DPI screens? Thanks.
- scoopertrooper 5y agoIncrease your screen resolution?
- junon 5y agoctrl + '+'. Increase the font size.
- bobmaxup 5y agoHow 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.
- phonethrowaway 5y agoname it carbon lol
- deleted 5y ago[deleted]
- Donckele 5y agoBeautiful maybe… but that example on the homepage I have no idea what it does and am so happy I don’t work at some place that produces that kind of code. I suppose you do need a tool like this when you have code like that.
- oefrha 5y agoThanks for veering off of the topic and letting us know you don't know a thing about functional programming, I guess?
- Dolo 5y agoI'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.
- capableweb 5y agoSeems 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, []) }
- j1elo 5y ago3 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...
- EMM_386 5y agoAnd not just use a screen snipping tool? Not sure I get it.
- mastazi 5y ago> 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
- forgotpwd16 5y agoArguably it's more aesthetic than most editors.
- noahtallen 5y agoI 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
- Cthulhu_ 5y agoIt 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?
- Faelian2 5y agoI have been wondering for months how these snippets are done on hackthebox official writeups ^^
- pjerem 5y agoIt’s sad that people don’t think about adding some attribution for the tools they use for free.
- vidyesh 5y agoTrue. 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.
- onkoe 5y agoCarbon's been trending recently. Seems like everyone and their mother is using it. Can't complain, though... Looks great!
- svnpenn 5y agoDear webmaster, please disable word wrap in code blocks.
- eterevsky 5y agoSo... It posts code as an image and prevents search and copy-paste?
- capex 5y agoIt does more than export an image, see here: https://github.com/carbon-app/carbon#exporting--sharing https://github.com/carbon-app/carbon#exporting--sharing
- forgotpwd16 5y agoIt was made for Twitter where posting code is not possible.
- xmcqdpt2 5y agoand it does automatically add alt text on Twitter so it's better than screenshots.
- mseepgood 5y agoText is better for accessibility and usability.
- macintux 5y agoAs capex shared, you get text too. https://github.com/carbon-app/carbon#exporting--sharing https://github.com/carbon-app/carbon#exporting--sharing
- deleted 5y ago[deleted]
- mgraczyk 5y agoDo 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.
- mastazi 5y agoThis 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
- amanzi 5y agoI'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?
- fermentation 5y agoYep the default example is a 1.1MB SVG. This website manages to inflate the original content over 3000x.
- oefrha 5y agoYou 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/ https://sourcefoundry.org/hack/
- dmitrygr 5y ago...or...the text just takes up a few hundred bytes...it is code, not an art project. "font: monospace" is good enough
- oefrha 5y agoThe 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.
- vletal 5y agoWell 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.
- afandian 5y agoI 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.
- detaro 5y agoThe 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 ;))
- deleted 5y ago[deleted]
- krono 5y agoI find the lack of a Gruvbox theme disturbing on many levels!
- tehsauce 5y agoIs 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?
- vidyesh 5y agoIn settings you can change them to windows' style buttons.
- deleted 5y ago[deleted]
- acosmism 5y ago#triggered
- truly 5y agoThanks 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?
- ciberado 5y agoI 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.
- goforbg 5y agoI've rarely seen people being very positive about any product in a Hackernews thread. [0] Coinbase : https://news.ycombinator.com/item?id=26816636 https://news.ycombinator.com/item?id=26816636
- acosmism 5y agobump
- yissp 5y agoTo 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.
- toomanybeersies 5y agoDon't forget that comment about Dropbox: https://news.ycombinator.com/item?id=9224 https://news.ycombinator.com/item?id=9224
- justshowpost 5y agoThis is because sacred "carbon" word used outside climate hoax scope. Hence the negative reaction from radical environmentalists (we've got an infestation here).
- enriquto 5y agoThis 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.
- Cthulhu_ 5y agoIt's for looking good, not how it (according to you) was meant to be.
- enriquto 5y agoLooks 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.
- aosaigh 5y agoWhat'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 https://apps.apple.com/app/petrify/id1451177988 [1] https://www.dangercove.com/news/petrify-36/ https://www.dangercove.com/news/petrify-36/
- skocznymroczny 5y agoI don't know if it's related, but Carbon is also the name of the pre-Cocoa MacOS windowing/UI library.
- pbexe 5y agoAccording 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/ https://www.dangercove.com/petrify/
- lol768 5y agoThe generated SVG renders for me as a 1750x782px transparent image. FF 95.
- dsumer 5y agoHey 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!
- jp1016 5y agoOur 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 https://codekeep.io/screenshot
- edem 5y agoIs there an API I can use to call this app instead of having to create the images manually?
- iandanforth 5y agoI 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 :)
- yboris 5y agoA 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 https://github.com/whyboris/TypeScript-Call-Graph