Convert Figma logo to code with AI

mixn logocarbon-now-cli

🎨 Beautiful images of your code — from right inside your terminal.

5,854
122
5,854
1

Top Related Projects

34,839

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

:clapper: Colorful animations in terminal output

22,131

🖍 Terminal string styling done right

📄 CLI that generates beautiful README.md files

Quick Overview

The carbon-now-cli is a command-line interface (CLI) tool that allows users to create beautiful images of their code snippets. It integrates with the Carbon website, a popular code-to-image generator, and provides a seamless way to capture and share code snippets.

Pros

  • Ease of Use: The CLI tool is straightforward to use, with a simple command-line interface that makes it easy to generate code images.
  • Customization: Users can customize the appearance of the code images, including the syntax highlighting, background color, and font.
  • Integration with Carbon: The tool seamlessly integrates with the Carbon website, allowing users to quickly and easily create code images.
  • Cross-platform Compatibility: The CLI tool is available for multiple platforms, including Windows, macOS, and Linux.

Cons

  • Dependency on Carbon: The tool is dependent on the Carbon website, which means that if the Carbon service is unavailable or changes, the tool may not function as expected.
  • Limited Functionality: The tool is focused on generating code images and does not provide additional features beyond that, which may limit its usefulness for some users.
  • Potential Privacy Concerns: The tool requires users to upload their code snippets to the Carbon website, which may raise privacy concerns for some users.
  • Lack of Offline Functionality: The tool requires an internet connection to generate code images, which may be a limitation for users in areas with poor internet connectivity.

Getting Started

To get started with carbon-now-cli, follow these steps:

  1. Install the tool using npm:
npm install -g carbon-now-cli
  1. Run the tool with the carbon-now command, passing in the file path of the code you want to capture:
carbon-now path/to/your/code.js
  1. The tool will open a browser window and display the generated code image. You can then save the image or share it with others.

  2. You can customize the appearance of the code image by passing in additional options, such as the theme, background color, and font:

carbon-now path/to/your/code.js --theme seti --bg "rgba(171, 184, 195, 0.4)" --font "Hack"

Competitor Comparisons

34,839

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

Pros of Carbon

  • Web-based interface for easy access and sharing
  • More customization options for image styling
  • Supports multiple languages and themes out-of-the-box

Cons of Carbon

  • Requires internet connection to use
  • Less suitable for batch processing or automation
  • May have slower performance for large code snippets

Code Comparison

Carbon (React component):

export default function Carbon() {
  return (
    <div className="carbon-container">
      <Editor />
      <Controls />
      <ExportButton />
    </div>
  )
}

carbon-now-cli (Node.js CLI):

#!/usr/bin/env node
const meow = require('meow')
const carbonNowCli = require('.')

const cli = meow(`
  Usage
    $ carbon-now <file>
    $ carbon-now <file> -l <language>
`)

carbonNowCli(cli.input[0], cli.flags)

The Carbon project is a web-based application built with React, offering a user-friendly interface for creating code screenshots. It provides more visual customization options but requires an internet connection.

carbon-now-cli is a command-line tool that allows for quick code image generation from the terminal. It's more suitable for automation and batch processing but has fewer styling options compared to the web-based Carbon.

Both projects aim to create beautiful code images, but they cater to different use cases and preferences.

:clapper: Colorful animations in terminal output

Pros of chalk-animation

  • Focuses on creating animated text in the terminal, offering a variety of animation styles
  • Lightweight and easy to integrate into existing Node.js projects
  • Provides a simple API for creating and controlling animations

Cons of chalk-animation

  • Limited to text animations, while carbon-now-cli offers image generation capabilities
  • May not be suitable for projects requiring static code snippets or images
  • Less versatile in terms of output formats and sharing options

Code Comparison

chalk-animation:

const chalkAnimation = require('chalk-animation');
const rainbow = chalkAnimation.rainbow('Hello, animated world!');
setTimeout(() => {
    rainbow.stop();
}, 2000);

carbon-now-cli:

carbon-now file.js -l /tmp -t oceanic-dark

Summary

chalk-animation is ideal for adding dynamic, colorful text animations to terminal applications, while carbon-now-cli excels in generating static, shareable code snippets as images. The choice between the two depends on whether you need animated terminal output or visually appealing code screenshots for documentation or sharing purposes.

22,131

🖍 Terminal string styling done right

Pros of chalk

  • Lightweight and focused on terminal string styling
  • Highly performant with minimal dependencies
  • Widely adopted and well-maintained

Cons of chalk

  • Limited to terminal output styling
  • Doesn't provide image generation capabilities
  • Requires manual implementation for complex formatting

Code comparison

carbon-now-cli:

const Carbon = require('carbon-now-cli');

Carbon('console.log("Hello, World!")', {
  theme: 'seti',
  backgroundColor: '#ADB7C1'
}).then(console.log);

chalk:

const chalk = require('chalk');

console.log(chalk.blue.bold('Hello') + ' World' + chalk.red('!'));

Key differences

  • carbon-now-cli focuses on generating beautiful code images
  • chalk specializes in styling terminal output
  • carbon-now-cli offers more visual customization options
  • chalk provides simpler and more direct string manipulation
  • carbon-now-cli integrates with the Carbon web service
  • chalk operates entirely locally without external dependencies

Both tools serve different purposes: carbon-now-cli for creating visually appealing code snippets, and chalk for enhancing terminal output. The choice between them depends on whether you need image generation or terminal styling capabilities.

📄 CLI that generates beautiful README.md files

Pros of readme-md-generator

  • Specifically designed for generating README files, providing a more focused and tailored solution
  • Interactive CLI prompts guide users through the README creation process
  • Supports multiple languages and includes badges for various services

Cons of readme-md-generator

  • Limited to README generation, while carbon-now-cli offers broader code snippet sharing capabilities
  • May require more manual input compared to carbon-now-cli's automatic code parsing
  • Less emphasis on visual aesthetics compared to carbon-now-cli's image output

Code Comparison

readme-md-generator:

const generateReadme = require('readme-md-generator');

generateReadme({
  projectName: 'My Project',
  projectDescription: 'A cool project'
});

carbon-now-cli:

const carbonNow = require('carbon-now-cli');

carbonNow('./myCode.js', {
  backgroundColor: '#1A1A1A',
  theme: 'seti'
});

While both tools are command-line utilities, they serve different purposes. readme-md-generator focuses on creating comprehensive README files for projects, while carbon-now-cli specializes in generating visually appealing code snippet images. The choice between the two depends on whether you need to create project documentation or share code visually.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Carbon CLI

🎨 Beautiful images of your code — from right inside your terminal.

Build Status Code style Featured in awesome-nodejs Twitter Stargazers Maintenance Requirements MIT license

Table of Contents

Description

carbon-now-cli brings the power of Carbon directly to your terminal. ⚡️

Generate beautiful images of your code with a single command.

Want to customize everything before generating the image? Run it in --interactive mode. 💅

Basic example

Features

  • 🖼 Downloads the real, high-quality image (no DOM screenshots)
  • ✨ Detects file type automatically
  • 🗂 Supports all languages & covers extra ground
  • ⚡️ Interactive mode via --interactive
  • 🎒 Presets via --preset to save and re-use your favorite settings
  • 🖱 Selective processing via --start and --end
  • 📎 Copies image to clipboard via --to-clipboard (cross-OS 😱)
  • 📚 Accepts file, stdin, or clipboard content as input
  • 🖋️ Supports custom theme colors
  • 🥞 Supports concurrency for easier batch processing
  • 👀 Saves to given location or opens in browser for manual finish
  • 🐶 Displays image directly in supported terminals
  • 🌈 Supports different export types (png, svg)
  • 📏 Supports different resolutions (1x, 2x, 4x)
  • ⏱ Reports each step and therefore shortens the wait
  • ✅ Heavily tested
  • ⛏ Actively maintained
  • 🧺 …and more!

Installation

Bun

bun i -g carbon-now-cli

pnpm

pnpm i -g carbon-now-cli

npx

npx carbon-now-cli <file>

npm

npm i -g carbon-now-cli

yarn

yarn global add carbon-now-cli

Requirements

Requirements

Usage

Beautiful images of your code — from right inside your terminal.

Usage
  $ carbon-now <file>
  $ pbpaste | carbon-now
  $ carbon-now --from-clipboard

Options
  --start, -s          Starting line of input
  --end, -e            Ending line of input
  --interactive, -i    Interactive mode
  --preset, -p         Apply an existing preset
  --save-to            Image save location, default: cwd
  --save-as            Image name without extension, default: original-hash
  --from-clipboard     Read input from clipboard instead of file
  --to-clipboard       Copy image to clipboard instead of saving
  --open-in-browser    Open in browser instead of saving
  --config             Use a different, local config (read-only)
  --settings           Override specific settings for this run
  --disable-headless   Run Playwright in headful mode
  --engine             Use different rendering engine, default: `chromium`
                       Options: `chromium`, `firefox`, `webkit`
  --skip-display       Don’t display the image in the terminal

Examples
  See: https://github.com/mixn/carbon-now-cli#examples

Presets

Creating a Preset

Running the carbon-now command generates a ~/.carbon-now.json config file.

Presets are stored in this file and consist of available settings. You can create presets either manually or automatically via the --interactive flag. When prompted, answer the following:

Presets 1

For example, naming the preset presentation will add it to ~/.carbon-now.json like this:

{
  "latest-preset": {
    // Equal to `presentation` below
  },
  "presentation": {
    "theme": "base16-light",
    "backgroundColor": "white",
    "windowTheme": "none",
    "windowControls": true,
    "fontFamily": "Space Mono",
    "fontSize": "18px",
    "lineNumbers": false,
    "firstLineNumber": 1,
    "selectedLines": "*",
    "dropShadow": false,
    "dropShadowOffsetY": "20px",
    "dropShadowBlurRadius": "68px",
    "widthAdjustment": true,
    "width": "20000px",
    "lineHeight": "140%",
    "paddingVertical": "35px",
    "paddingHorizontal": "35px",
    "squaredImage": false,
    "watermark": false,
    "exportSize": "2x",
    "type": "png"
  }
}

latest-preset will be overwritten after each run, while presentation remains until manually deleted.

Using a saved preset

To use a saved preset, simply run:

carbon-now _unfold.js --preset <name-of-preset>

If the preset or ~/.carbon-now.json does not exist, carbon-now-cli will fall back to the default settings and be smart about the rest.

Result:

Presets 1

Settings

interface CarbonCLIPresetInterface {
  backgroundColor: string;
  dropShadow: boolean;
  dropShadowBlurRadius: string;
  dropShadowOffsetY: string;
  exportSize: '1x' | '2x' | '4x';
  firstLineNumber: number;
  fontFamily: CarbonFontFamilyType;
  fontSize: string;
  lineHeight: string;
  lineNumbers: boolean;
  paddingHorizontal: string;
  paddingVertical: string;
  selectedLines: string; // All: "*"; Lines 3-6: "3,4,5,6", etc.
  squaredImage: boolean;
  theme: CarbonThemeType;
  type: 'png' | 'svg';
  watermark: boolean;
  widthAdjustment: boolean;
  windowControls: boolean;
  windowTheme: 'none' | 'sharp' | 'bw';
  custom?: CarbonThemeHighlightsInterface;
  width?: string;
  // Below are detected automatically, and not persisted as keys
  language?: string;
  titleBar?: string;
}

Also see CarbonFontFamilyType, CarbonThemeType & CarbonThemeHighlightsInterface

Re-using settings

It just works. ™

carbon-now automatically reuses settings from previous runs, so you don’t need to worry about manually reconfiguring them.

Presets 3

Custom theme colors

From v2.0, carbon-now-cli supports custom theme colors for detailed styling. Define a custom key inside a preset that complies to the following type:

interface CarbonThemeHighlightsInterface {
  background?: string;
  text?: string;
  variable?: string;
  variable2?: string;
  variable3?: string;
  attribute?: string;
  definition?: string;
  keyword?: string;
  operator?: string;
  property?: string;
  number?: string;
  string?: string;
  comment?: string;
  meta?: string;
  tag?: string;
}

Example ~/.carbon-now.json with custom theme colors:

{
  "hacker": {
    "backgroundColor": "rgba(0, 255, 0, 1)",
    "windowTheme": "bw",
    "windowControls": true,
    "fontFamily": "Anonymous Pro",
    "fontSize": "18px",
    "lineNumbers": false,
    "firstLineNumber": 1,
    "dropShadow": false,
    "selectedLines": "*",
    "dropShadowOffsetY": "20px",
    "dropShadowBlurRadius": "68px",
    "widthAdjustment": true,
    "lineHeight": "133%",
    "paddingVertical": "30px",
    "paddingHorizontal": "30px",
    "squaredImage": false,
    "watermark": false,
    "exportSize": "2x",
    "type": "png",
    "custom": {
      "background": "rgba(0, 0, 0, 1)",
      "text": "rgba(0, 255, 0, 1)",
      "variable": "rgba(0, 255, 0, 1)",
      "variable2": "rgba(0, 255, 0, 1)",
      "attribute": "rgba(0, 255, 0, 1)",
      "definition": "rgba(0, 255, 0, 1)",
      "keyword": "rgba(0, 255, 0, 1)",
      "operator": "rgba(0, 255, 0, 1)",
      "property": "rgba(0, 255, 0, 1)",
      "number": "rgba(0, 255, 0, 1)",
      "string": "rgba(0, 255, 0, 1)",
      "comment": "rgba(0, 255, 0, 1)",
      "meta": "rgba(0, 255, 0, 1)",
      "tag": "rgba(0, 255, 0, 1)"
    }
  }
}
carbon-now _unfold.js --preset hacker

Result:

Presets 3

Limitations

Please note that custom theme colors aren’t applied with --open-in-browser because they aren’t query string parameters but instead use localStorage, which is solely set inside the Playwright instance.

Local configs

Use the --config flag for local configuration files. This is helpful for sharing presets across users in a project.

carbon-now _unfold.js --config local-config.json --preset dark

Local configs are read-only and differ from ~/.carbon-now.json in that:

  1. local-config.json won’t be created if it doesn’t exist.
  2. latest-preset is not written to local-config.json.

Examples

Assuming you have a file _unfold.js with this content:

// Example from https://carbon.now.sh/
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, [])
};

Basic

carbon-now _unfold.js

Uses default settings and saves the image as .png in your cwd.

Result:

Basic example

Fully customized

carbon-now _unfold.js --interactive

Launches interactive mode to customize every aspect, like theme, font-family, padding, etc.

Input:

Example 2, Input

Result:

Example 2, Output

Selective

carbon-now _unfold.js --start 3 --end 6

Generates an image for lines 3 to 6. Will throw an error if --start > --end.

Result:

Example 3

Copying to clipboard

Copying to Clipboard

Copies the image to clipboard instead of saving it. Requires xclip on Linux.

carbon-now _unfold.js --to-clipboard

Linux

xclip is required. Install with

sudo apt-get install xclip

Windows & macOS

It just works. ™

Input Sources

In addition to files, input from stdin or the clipboard is also supported.

stdin

pbpaste | carbon-now
echo '<h1>Hi</h1>' | carbon-now

Clipboard

carbon-now --from-clipboard

Overrides

You can override settings on a per-run basis.

carbon-now _unfold.js --preset presentation --settings '{"theme": "nord", "titleBar": "custom-title.js"}'

Result:

Example 4

Full Example

carbon-now _unfold.js --start 3 --end 6 --save-to ~/Desktop --save-as example-23 --interactive

Saves an image of lines 3-6 to ~/Desktop/example-23.png with custom settings.

To preview in the browser instead of saving, do

carbon-now _unfold.js --start 3 --end 6 --interactive --open-in-browser

License

MIT © Miloš Sutanovac

NPM DownloadsLast 30 Days