carbon-app / carbon Goto Github PK

View Code? Open in Web Editor NEW

34.0K 248.0 1.9K 19.67 MB

:black_heart: Create and share beautiful images of your source code

Home Page: https://carbon.now.sh

License: MIT License

JavaScript 99.91% Shell 0.09%

carbon javascript beautiful snippets github-gist sharing education tweet presentation

carbon's Introduction

Translations

Español	हिंदी	Deutsch	简体中文	Português
മലയാളം	Türkçe	한국어	தமிழ்	Français
日本語	Svenska	Polski	Nederlands	正體中文
Indonesia	Українська	Italiano	עברית	Русский
العربية	বাংলা	Add +

Introduction

You know all of those code screenshots you see on Twitter? Though the code's usually impressive, we saw room for improvement in the aesthetic department. Carbon makes it easy to create and share beautiful images of your source code. So what are you waiting for? Go impress all of your followers with your newfound design prowess.

Features

Customization. Customize things like your image's syntax theme, font style, and more
Share quickly. Save your image or a link with one click
Save snippets. Create an account to save snippets for later. Shared snippets are automatically unfurled on Twitter and Slack.

Usage

Import

There are a few different ways to import code into Carbon:

Drop a file onto the editor
Append a GitHub gist ID to the URL (e.g. carbon.now.sh/<gist_id_goes_here>)
Or just start typing!

Customization

Once you've got all of your code into Carbon, you can customize your image by changing the syntax theme, background color, window theme, padding, shadows, fonts, and more.

Exporting & Sharing

After you've customized your image you can share your snippet in a number of ways

Create a saved snippet

Sharing a saved snippet will automatically unfurl the image on platforms like Twitter and Slack. This lets users see your creation, while also giving them access to the source code via the link. Better yet, if you need to make an update, simply follow the link yourself to edit the snippet directly.

To create a saved snippet:

Login using the "Sign in/Sign up" button
Edit as you normally would — your snippet will get saved automatically
Copy the URL from your browser window and share away!

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.

You can embed any Carbon snippet in your website directly using the carbon.now.sh/embed URL. The "Copy Menu" lets you quickly copy the correct iFrame snippet, or the encoded URL for embedding on platforms like Medium.

Finally, you can also embed saved snippets or GitHub gists using carbon.now.sh/embed/:id.

Use the Tweet button

The Tweet button will not only share the image on Twitter, but it will also correctly encode the alt text to ensure your images are accessible. However, if you want to tweet image yourself, please check out how to make your Twitter images accessible.

Download the image directly

Carbon supports downloading your image as a PNG and SVG. You can also click Export → Open to open your image directly in the browser. Finally, you can copy the Carbon image directly to your clipboard by going to Copy → Image.

Installing Carbon for Desktop (Offline)

If you are using Google Chrome, or another browser that supports Progressive Web Apps, you can install Carbon for use offline by:

Visit carbon.now.sh
Click your browser's settings menu
Click "Install Carbon..."

Community

Check out these projects our awesome community has created:

Editor Plugins

IntelliJ IDEA carbon-now-sh - Open up the selection in your current IntelliJ IDEA file in Carbon through a context menu
Atom carbon-now-sh - Open up your current Atom file in Carbon with shift-cmd-A
VS Code carbon-now-sh - Open up your current VS Code file in Carbon with command carbon
Sublime Text 3 carbon-now-sh - Open up the selection in your current Sublime Text 3 file with a custom bound key
Vim carbon-now-sh - Open up the selection in your current Vim/Neovim using function CarbonNowSh()
Emacs carbon-now-sh - Open up the selection in your current Emacs using interactive function carbon-now-sh
Xcode carbon-now-sh - Open up your current selection in carbon.now.sh
Xcode nef - This Xcode extension enables you to export a code selection as a Carbon snippet in a single action

Tools

CLI carbon-now-cli - Open a file in Carbon or download it directly using carbon-now, featuring an interactive mode, selective highlighting and more
CodeExpander - A smart GitHub gist client with the TextExpander features
nef - Export multiple Carbon code snippets from Xcode Playground.
@carbonshbot - A Telegram chatbot which takes in a code snippet or gist URL and generates an Carbon image
R carbonate - Iteratively manipulate image aesthetics in R and either open in Carbon or download directly.
Carbon for Slack - Use Carbon directly in Slack. Just invoke the /carbon command.

Citations

"CS 101 - An Introduction to Computational Thinking" - a computer science textbook by Sarbo Roy.

Authors

Carbon is a project by:

Mike Fix (@mfix22)
Brian Dennis (@briandennis)
Jake Dexheimer (@jakedex)

License

Contribute & Support

Pull requests are welcome! Please see our contributing guidelines for more details.

Sponsors & Backers

Thanks To

▲ Vercel for sponsoring Carbon's hosting.

All Contributors

Thanks goes out to all these wonderful people (emoji key):

_briandennis 💻 📖 🚇 👀	_mfix22 💬 💻 🤔	_jakedex 💬 💻 🎨 📹	_andrewda 💬 💻 🐛 👀	_yeskunall 💻 📖 🔧 🐛	_{stoshfabricius} 💻	_jkling38 📖
_otobrglez 💻	_darahak 📖	_dom96 💻	_{elrumordelaluz} 💻	_cjb 💻	_{Krzysztof-Cieslak} 💻	_fernahh 📖
_g3r4n 💻	_{Mat Gadd} 🐛 💻	_{Brad Davies} 🐛 💻	_{Rafael Câmara} 💻	_{Gleb Bahmutov} ⚠️ 🔧	_{Iván Munguía} 💻	_{Dillon Mulroy} 💻
_{Nihad Abbasov} 💻	_{Bruno C. Couto} 💻	_{Mark Molnar} 💻	_{Takahiko Inayama} 💻	_{François Martin} 💻	_{Raphael Amorim} 💻	_{Camron Flanders} 💻
_{Eric Adamski} 💻	_{Winner Crespo} 💻 🎨	_Milos 💻 🔧 📖 🌍	_{Yashu Mittal} 💻	_{Rachel M. Carmena} 📖	_{Miguel Salazar} 📖 🌍	_{Vyom Jain} 📖 🌍
_racaljk 🌍	_Sean 💻	_{Izabela Borges} 🌍	_{Shinil M S} 🌍	_{Berke Atac} 🌍	_{LEE YONGJUN} 🌍	_{Matthew Nielsen} 💻
_Boy 📦	_{Vetrivel Chinnasamy} 🌍	_{Farzad YZ} 💻 🤔	_{Yannick Loriot} 🌍	_{Joel Hanson} 💻	_{Muhammad Muzzammil} 💻	_souppower 🚇
_{Masato Urai (@uraway_)} 🌍	_Fernando 🌍	_{Megha Sachdev} 💻 ⚠️	_{Anudeep Reddy} 🚇	_Munieru 🌍	_{Adam Lusted} 💻	_{Jose Noriega} 🌍
_{Merlin Fuchs} 🌍	_{Ramy Majouji} 💻	_{Viktor Nemes} 💻	_{Eric Bailey} 💻	_Nazeefa 🌍	_{Pratik Butani} 📝	_{Bakti Aditya} 💻
_{Caleb Taylor} 💻	_{Rogério Munhoz} 💻	_Technoknol 💻	_{Tymoteusz Makowski} 💻	_{Nisar Hassan Naqvi} 🐛	_{Ilyas Karim} 🐛	_{Nick Fix} 🤔
_{Melanie Sumner} 🤔	_aluc 💻	_{B. Mearns} 🤔	_{Peng Jie} 💻	_{Binyamin Aron Green} 💻	_Michal 🌍	_{Quinn Blenkinsop} 💻
_{Dwiferdio Seagal Putra} 💻	_{Ashley Woodall Clark} 💻	_{Tim Wienk} 🌍	_{George McCarron} 📖	_{Erwin Rahayu} 🌍 📖	_Luca 💻	_{Andrew Hayes} 💻
_{Bereket Semagn} 💻	_{Lorenzo Lancia} 🌍	_{Guy Adler} 🌍	_{Dan Bamikiya} 🤔	_kewang 🌍	_{Rizda Dwi Prasetya} 🖋	_AbreuY 🌍
_{>_Rizky.dev} 🌍 📖	_{Abidemi Harry} 💻	_Marco 🌍	_{Sam Robbins} 📖	_alceil 💻	_hatsu 💻	_{Praveen Kumar Purushothaman} 🌍
_{Amir Elsagan} 🌍	_korzck 🌍	_{Sakibul Alam} 🌍

carbon's People

Contributors

Stargazers

Watchers

Forkers

elrumordelaluz cjb dom96 trburgess weichiachang swarad07 juanfernandes albin-cr jacobmoncur codetally siddesh-shilkar ryuuzaki113 darahak ichadhr hhy5277 suissa battbeach markozxuu happy-ferret schubidu jithinraj otobrglez andrewda harimp andresvalderrama magicmark pedromartinez11 marslabtron aristath rifal89 g3r4n iboss-ptk jkling38 bojko-evgen vikiszabo zcei mubassirhayat phirebase manask4 ivn-cote dmreiland hugomd nrep hoangpq umarmughal alexfalcucci-archive sibelius sangka blazeu bug-lollipop jdb8 nguyenvanduocit pa7ryk gnbaron drarok cwonrails alangreene garyelephant slorber varbrad nitinreddy3 donaminos bobiscool ryan-codingintrigue sphinxorunixinskie thomaswhyyou rafaelcamaram kcjpop bp-bling dinneo kavalcante aarohmankad codenameyau nictrix pranavlathigara joshbuchea astronomersiva bahmutov hargovindarora getaclue00 petejohanson jimliu kiriappeee omerherera dmmulroy priestd09 warborn toobeecontinuedd bdougherty miknotauro redstrike nicolasleger martinfrancois as-lezon zyyj007 showmecodex caomxin roisevege gj641102478 sunytonyli

carbon's Issues

Making save image work in all major browsers

To start:

Safari
Edge

Solarized theme has inaccurate colors

This is what code looks like on https://carbon.now.sh/ when I choose the Solarized theme:

But the background color is different from that of the light variant of the official Solarized theme:

The background looks white in Carbon, but it should be light yellow. I'm not sure, but the shade of orange used for export const might also not be in Solarized's palette.

Note that Solarized also has a dark theme with the same text colors but a dark blue background. Don't get them confused. Maybe you want to support both as "Solarized (light)" and "Solarized (dark)"?

Landing directly on `/about` renderings index not about page

Feature request: Copy Image to clipboard

It will be really great if there is copy to clipboard option.
Quite helpful when you have to share the image to slack - discord or any other chatting application which supports direct upload.

Add handles for manually resizing terminal

https://github.com/STRML/react-resizable

Feature request: Customizable dimensions

First of all, great idea!

I'd like to share some code on Instagram, but it requires me to share only square images.

A greate feature would be the ability to set/change dimensions of the image.

Cheers!

Use `.github` for GitHub templates

Maybe create a .github/ folder at this point, and move CONTRIBUTING.md inside it? Also, maybe create an ISSUE_TEMPLATE.md and PULL_REQUEST.md?

But most importantly, in lieu of #79, I was thinking that maybe we can add a CONTRIBUTORS.md inside .github/ and link it in README.md instead? This way the README itself doesn't have to get cluttered unnecessarily.

Fix `` highlighting for F#

There is an issue with how textual functions names are displayed for F#, please, take a look:

It would be great if words in function name could be colored using the same color.

Lazy load stylesheets for themes

Carbon CLI

If there's enough support, we could create a CLI interface for Carbon.

Safari 11: Save Image

Saving as image doesn't work.

[Error] TypeError: e.replace is not a function. (In 'e.replace(/&/g,"&amp;")', 'e.replace' is undefined)
	t (app.js:21:977311)
	p (app.js:21:982629)
	value (app.js:21:616414)
	value
	value (app.js:21:616248)
	value
	(anonymous function) (app.js:21:1529383)
	bt (app.js:2:23963)
	vt (app.js:2:24238)
	ar (app.js:2:50646)
	pr (app.js:2:53169)
	Za (app.js:2:98526)
	(anonymous function) (app.js:2:147167)
[Error] Unhandled Promise Rejection: [object Event]
	(anonymous function)
	promiseReactionJob

Adjust width

I just generated this image:

It'd be great if:

I could make the font size bigger (ref #46)
but also if I could shrink the width of the code block manually (or it adjust automatically based on longest line)

misalignment of selected color block

Selected color block seems to overflow the container's border.

Add repository information to package.json

https://docs.npmjs.com/files/package.json#repository

Selecting a language and then going back to `auto` breaks highlighting

Just from the demo, selecting a language for code highlighting and then switching back to auto breaks the highlighting. GIF below:

Apologies if this is intended or a duplicate. Love the project!

Editor Integrations

We should create simple plugins for Atom, VS code, Sublime with select text -> command palette -> create screenshot support.

(source: https://www.reddit.com/r/webdev/comments/72qz1k/carbon_create_and_share_beautiful_images_of_your/dnl14fp/)

Screenshot shows text highlighting

If you have some text highlighted on the code snippet it preserves that highlighting when the image is generated.

Not sure if this is desired or not. I unexpectedly generated an image with the highlight when I didn't want it.

Thanks for an awesome resource!

Add C# Support

C# is not on the list, either it's not supported or doesn't work properly.

Make `carbon.now.sh` a PWA

This is something that can start out slow, but if you guys seem interested, I think, IMO, turning carbon.now.sh into a PWA would be super 👍

The most important think would be to allow caching, and hence enable the site to work offline as well. What do you guys think?

Loving this app so far 😍

Support GraphQL syntax mode

(bug) Switching to specific language, then back to `Auto` breaks render

See screenshots for clarification. ⬇️

Set to auto:

Change to HTML:

Now back to auto:

IMO, the editor should have gone back to the state it was in the first image. LMK if this needs more clarification.

option to save my preferences

suggestions > save in session storage?

Add relevant badges to README

https://shields.io/

Create build script to add contributors to the README

Similar to all-contributors, or open-collective, but personalized for Dawn

We want a way to recognize all our awesome contributors!

Adjust font style

font family
font weight
font size
line height
letter spacing

Force `Save As` dialog when trying to save the image

Hey guys 👋 great work on Carbon!

Right now, all images are saved as carbon.png by default. This means that if I were to save multiple screenshots in succession, they would all be saved under the same name, with just a number appended to the file name (on Windows as carbon (1).png) and so on.

Maybe we could make it so that the site forces a Save As dialog asking the user to name the file by themselves? Just a suggestion, but I would love to see this implemented. ❤️

Read content & preferences from URL query string

This would make sharing links to the page much easier.

For example, https://carbon.now.sh/?code=Hello%20world!&theme=blackboard would pre-fill the editor with "Hello world!" and apply the Blackboard theme. Everything else would fall back to the default settings, of course.

If this would be a welcome addition, I'll open a PR for it.

Add C# language support

It would be really great if this service could support syntax highlighting for C# programming language.

Thanks!

User preferences should be stored

It would be nice if the site could store the user preferences like color, style, etc... You can do that using cookies...

Add support for Fira Code

https://twitter.com/evgenyrodionov/status/912393242360020992

"Save Image" option is not working in Firefox

As the title says, when click on Save Image button in Firefox nothing happens.

Share button isn't working on https://carbon.now.sh/

when you hit "tweet image" button, nothing happens.

Box shadow size

Hello!

Thank you guys for this useful tool!
I would suggest to add an option to set the size of the box shadow.
(I will try to find the time to create the PR)

Make responsive

The site/editor should be responsive, complete with layout tweaks for use on mobile.

Potentially helpful https://github.com/contra/react-responsive (thanks, @eclecticexistential)

Add base-16 syntax

https://twitter.com/julianwachholz/status/915247000047714306

Option to download/copy code from image

Hey guys!

I really love the idea of the code sharing by image and how it get presented. I only found a limitation whenever I want to share my code to be copied by a reader. You guys think this is possible in a future stage?

Wished feature;
Possibility to copy the code shown on the image to an editor.

Twitter saves images as JPEG

This can be easily avoided though by making some part of an image semi- or fully transparent (e. g. the whole background or just the top left pixel). You can look at https://github.com/iamale/screentweet and Francesco149/gweet#2 for some exploration.

And thanks for a great service, by the way!

Lint (and maybe prettier)

button apperance change on hover

button:hover {
    background: props.color;
    color: #fff;
    border: 0.5px solid #fff;
}

Use `react-codemirror2` instead of `react-codemirror`

react-codemirror2 is much more up to date than react-codemirror, which is still on a version of CodeMirror that's more than 1 year old.

Automatically deploy to website

Looks like the website is a bit behind the master branch. Automatic deploys could probably be done with now-travis so that every push to master is deployed to https://carbon.now.sh/.

Missing Mobile Support

Your website is broken when used on a mobile device. By broken I am referring to the issue that when your website is viewed on a screen less than 893px wide, your website does not allow horizontal scrolling to view parts of the screen that become hidden. A simple way to fix this would be to just allow horizontal scrolling. Another fix would be to use @media queries to adjust for screens smaller than 893px and then again for even smaller screens. And yet another idea would be to use percentages % or viewport width vw

wrong monokai?

It is a nice tool, but it doesn't work in Safari

I tried to use Carbon in Safari, but it doesn't work.

I copied and paste some code to the window, but when I press the Save Image button, nothing happen.

When I tried in Chrome, worked fine!

Add Windows theme

I know many devs don't think of Windows but it would be nice to have Windows represented here rather than the assumption that the UI will be OSX.

C code not highlighted as expected

C or C++ code is not highlighted as I would expect.
I saw that you were using CodeMirror, so I went to see the documentation.

It should at least highlight type names, as seen on this page.
See what I got on Carbon below, with Monokai theme.

I only looked at lib/constants.js and components/Carbon.js and didn't see anything wrong, so I'm not sure what's happening. Maybe a style conflict?

Sample

Light themes support

Right now there are not light terminal themes. Some users may want to use white (or similar) terminal background.

I am big fan of light terminal themes like sobole.

Any chance to get a tool to import a custom theme?
Or maybe include some popular light options?