# Carbon — Create Beautiful Images of Your Source Code

> A web application that generates aesthetically styled screenshots of source code with syntax highlighting, custom themes, and export options.

## Install

Save in your project root:

# Carbon — Create Beautiful Images of Your Source Code

## Quick Use
```bash
# Visit the web app directly
open https://carbon.now.sh
# Or use the CLI
npx carbon-now-cli myfile.js
# Or use the VS Code extension: search "Carbon" in extensions
```

## Introduction
Carbon turns source code snippets into visually attractive images suitable for sharing on social media, documentation, or presentations. It renders code with syntax highlighting inside a styled window frame with configurable backgrounds, shadows, and padding.

## What Carbon Does
- Converts code snippets into PNG or SVG images with syntax highlighting
- Applies window chrome styling (macOS-style traffic lights, title bar)
- Supports 150+ programming languages via highlight.js and CodeMirror
- Allows background customization with solid colors, gradients, or images
- Provides direct sharing to Twitter or clipboard with one click

## Architecture Overview
Carbon is a Next.js application using CodeMirror for the code editor and dom-to-image for image rendering. When a user pastes code, the React component tree renders it with the selected theme and styling. The export function captures the styled DOM node as a canvas, then converts it to PNG or SVG format for download.

## Self-Hosting & Configuration
- Clone the repo and run yarn install followed by yarn dev
- Deploy to Vercel or any Node.js hosting with zero additional config
- Pre-fill code via URL query parameters for shareable links
- Embed carbon widgets in documentation using the iframe API
- Environment variables configure default theme and language

## Key Features
- 30+ syntax themes including Dracula, Monokai, Solarized, One Dark
- Adjustable padding, font size, line height, and window shadow
- SVG export for resolution-independent images
- URL state encoding for sharing configurations via link
- Auto-language detection based on code content

## Comparison with Similar Tools
- **Ray.so** — Raycast-built alternative with fewer themes but cleaner UI
- **Chalk.ist** — animated code snippet images with step-by-step reveal
- **Silicon** — Rust CLI that generates images locally without a browser
- **Codeimg.io** — similar concept with more social-media-oriented templates

## FAQ
**Q: Can I use Carbon from the command line?**
A: Yes, carbon-now-cli (npx carbon-now-cli file.py) opens a headless browser, renders the image, and saves it locally.

**Q: What image formats are supported?**
A: PNG (default) and SVG. SVG preserves vector quality at any zoom level.

**Q: How do I set a custom font?**
A: Select from available monospace fonts in the settings dropdown. Custom fonts require self-hosting.

**Q: Is there a maximum code length?**
A: No hard limit, but very long snippets produce oversized images. Keep snippets focused for best results.

## Sources
- https://github.com/carbon-app/carbon
- https://carbon.now.sh

---
Source: https://tokrepo.com/en/workflows/asset-2a82ea11
Author: AI Open Source