Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mixn/carbon-now-cli
🎨 Beautiful images of your code — from right inside your terminal.
https://github.com/mixn/carbon-now-cli
cli cli-app cli-application cli-command cli-tool cli-utilities cli-utility command-line node nodejs
Last synced: 7 days ago
JSON representation
🎨 Beautiful images of your code — from right inside your terminal.
- Host: GitHub
- URL: https://github.com/mixn/carbon-now-cli
- Owner: mixn
- License: mit
- Created: 2018-07-02T13:33:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-08T13:31:19.000Z (27 days ago)
- Last Synced: 2024-10-14T23:40:54.831Z (21 days ago)
- Topics: cli, cli-app, cli-application, cli-command, cli-tool, cli-utilities, cli-utility, command-line, node, nodejs
- Language: TypeScript
- Homepage:
- Size: 21.7 MB
- Stars: 5,773
- Watchers: 42
- Forks: 121
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome - carbon-now-cli - 🎨 Beautiful images of your code — from right inside your terminal. (JavaScript)
- awesome-nodejs-cn - carbon-now-cli - 为你的代码生成精美的图片 (包 / 命令行程序)
- awesome-nodejs-cn - carbon-now-cli - **star:5716** 一款生成代码展示图片的终端工具 ![star > 2000][Awesome] (包 / 命令行程序)
- awesome-github-repos - mixn/carbon-now-cli - 🎨 Beautiful images of your code — from right inside your terminal. (TypeScript)
- awesome-github-star - carbon-now-cli
- awesome-list - carbon-now-cli
- awesome-nodejs - carbon-now-cli - Beautiful images of your code — from right inside your terminal. (Packages / Command-line apps)
- awesome-linux-ricing - carbon-now-cli - Beautiful images of your code — from right inside your terminal. (Terminal / Apps and Tools)
- awesome-nodejs - carbon-now-cli - Beautiful images of your code — from right inside your terminal. - ★ 3425 (Command-line apps)
- awesome-node - carbon-now-cli - Beautiful images of your code — from right inside your terminal. (Packages / Command-line apps)
- awesome-nodejs-cn - carbon-now-cli - 代码的精美图片-从终端内部开始. (目录 / 命令行应用)
- awesome - mixn/carbon-now-cli - 🎨 Beautiful images of your code — from right inside your terminal. (TypeScript)
- awesome-github - 源码转好看的图片命令行
README
# [](https://github.com/mixn/carbon-now-cli)
> 🎨 Beautiful images of your code — from right inside your terminal.
[](https://github.com/mixn/carbon-now-cli/actions) [](https://github.com/prettier/prettier) [](https://github.com/sindresorhus/awesome-nodejs#command-line-apps) [](https://twitter.com/mixn) [](https://github.com/mixn/carbon-now-cli/stargazers/) [](https://github.com/mixn/carbon-now-cli/graphs/commit-activity) [](https://img.shields.io/node/v/carbon-now-cli) [](https://github.com/mixn/carbon-now-cli/blob/master/license)
## Table of Contents
- [Description](#description)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Examples](#examples)
- [Presets](#presets)
- [License](#license)
## Description
[carbon.now.sh](https://carbon.now.sh/) is an excellent tool that lets you generate beautiful images of your source code through an intuitive UI while allowing you to customize aspects like fonts, themes, window controls, and & more.
`carbon-now-cli` gives you the full power of Carbon — right at your fingertips, **inside the terminal**.
Generate beautiful images from a source file, or sections of a source file, by running a single command.
Want to customize **everything** before generating the image? Run it in ⚡️ ***interactive mode.*** ⚡️ 😎
## Features
- 🖼 Downloads the **real**, **high-quality** image (no DOM screenshots)
- ✨ Detects file type automatically
- 🗂 Supports all languages supported by [carbon.now.sh](https://carbon.now.sh) & [covers extra ground](https://github.com/mixn/carbon-now-cli/blob/master/src/helpers/cli/extensions-map.helper.ts)
- ⚡️ [Interactive mode](#fully-customized) via `--interactive`
- 🎒 [Presets](#presets) to save and re-use your favorite settings
- 🖱 [Selective processing](#selective) via `--start` and `--end`
- 📎 [Copies image to clipboard](#copying-to-clipboard) via `--to-clipboard` (cross-OS 😱)
- 📚 Accepts [file, `stdin`, or clipboard content](#input-sources) as input
- 👀 Saves to [given location](#full-example) or [only opens in browser](#full-example) for manual finish
- 🐶 Displays image directly in supported terminals
- 🖋️ Supports [custom theme colors](#custom-theme-colors)
- 🌈 Supports saving as `.png` or `.svg`
- 📏 Supports `2x`, `4x` or `1x` resolutions
- 🧺 Supports pretty much [any other](https://github.com/mixn/carbon-now-cli/issues/50) [Carbon feature](https://github.com/mixn/carbon-now-cli/issues/70)
- ⏱ Reports each step and therefore shortens the wait
- ✅ Heavily tested
- ⛏ Actively maintained
## Installation
### pnpm
```
pnpm i -g carbon-now-cli
```
### npm
```
npm i -g carbon-now-cli
```
### yarn
```
yarn global add carbon-now-cli
```
### npx
```
npx carbon-now-cli
```
#### Requirements
[](https://img.shields.io/node/v/carbon-now-cli)
## Usage
```
Beautiful images of your code — from right inside your terminal.
Usage
$ carbon-now
$ pbpaste | carbon-now
$ carbon-now --from-clipboard
Options
-s, --start Starting line of input
-e, --end Ending line of input
-i, --interactive Interactive mode
-p, --preset Apply an existing preset
--save-to Image save location, default: cwd
--save-as Image name, default: original-hash.{png|svg}
--from-clipboard Read input from clipboard instead of file
--to-clipboard Copy image to clipboard
--open-in-browser Open in browser instead of saving
--config Use a different, local config (read-only)
--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
```
## Examples
Assuming you have a file `unfold.js` with this content
```javascript
// 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, [])
};
```
and you’d like to make a beautiful image out of it. You could approach this in several ways.
### Basic
```
carbon-now unfold.js
```
Takes the entire source of `unfold.js`, uses Carbon’s default settings, and saves as `.png` into your `cwd`.
**Result**:
### Fully customized
```
carbon-now unfold.js --interactive
```
Launches an interactive mode, prompting questions, allowing you to customize every aspect of Carbon, like syntax theme, `font-family`, `padding`, window controls, etc.
Given this input…
…the result will look like so 😍:
If you’re unsure what each question, e.g., “Make squared image?” refers to, simply confirm by hitting **Enter** — it will default to a sensible, nice-looking thing.
If needed, you can always check the [default settings](https://github.com/mixn/carbon-now-cli/blob/master/src/config/cli/default-settings.config.ts).
**Note**: `carbon-now` will be smart enough to re-use your last used settings instead of the default ones. 🤓
### Selective
```
carbon-now unfold.js --start 3 --end 6
```
Reads and creates an image based on lines `3` to `6` instead of the entire file. Will throw an error if `-s` > `-e`.
Selective processing can of course be combined with interactive mode, as with any other option. 😊
#### Result:
### Copying to clipboard
It is [sometimes desired to just put the image in the clipboard](https://github.com/mixn/carbon-now-cli/issues/3#issue-339776815), so that it can be instantly pasted into other apps (like Keynote 💻 or Twitter 🐦). This is what the `--to-clipboard` flag is for.
```
carbon-now unfold.js --to-clipboard
```
will copy the image to clipboard instead of downloading it to a given directory.
Please be aware that this requires some binaries to be present on certain OS.
#### Linux
[`xclip`](https://linux.die.net/man/1/xclip) is required. You can install it via
```
sudo apt-get install xclip
```
#### Windows & macOS
*It just works.* ™
### Input Sources
You’ll sometimes find yourself in a situation where you’d like to create an image based on a piece of code, but don’t want to create a file for it first.
In addition to files, `carbon-now-cli` therefore also accepts input coming from `stdin` or the clipboard.
#### `stdin`
```
pbpaste | carbon-now
echo '
Hi
' | carbon-now
```
#### Clipboard
```
carbon-now --from-clipboard
```
### Full Example
For demonstration purposes, here is an example using most options.
```
carbon-now unfold.js --start 3 --end 6 --save-to ~/Desktop --save-as example-23 --interactive
```
This saves a beautiful image of lines `3` to `6` to `~/Desktop/example-23.png`, after accepting custom wishes via interactive mode.
If you’re unsure how exactly the image will turn out, you can always use `--open-in-browser`.
```
carbon-now unfold.js --start 3 --end 6 --interactive --open-in-browser
```
This will open the image in the browser for final touches, instead of saving it immediately. 😌
## Presets
### Creating a preset
However you use the `carbon-now` command, a `~/.carbon-now.json` file will be created for you. This is where all your presets and the settings of the last interactive run will live.
When running `carbon-now` with `-i`, you’ll be asked the following two questions last:
Answering with yes and naming the preset (in this case `presentation`) will result in the preset being saved to `~/.carbon-now.json`. In this particular case, `~/.carbon-now.json` will look like so:
```
{
"latest-preset": {
"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,
"lineHeight": "140%",
"paddingVertical": "35px",
"paddingHorizontal": "35px",
"squaredImage": false,
"watermark": false,
"exportSize": "2x",
"type": "png"
},
"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,
"lineHeight": "140%",
"paddingVertical": "35px",
"paddingHorizontal": "35px",
"squaredImage": false,
"watermark": false,
"exportSize": "2x",
"type": "png"
}
}
```
`latest-preset` will be overwritten after each interactive run. `presentation` is meant to stay until you eventually decide to delete it manually.
### Using a saved preset
Re-using presets is as easy and straight-forward as:
```
carbon-now unfold.js -p
```
If a given preset or `~/.carbon-now.json` doesn’t exist, `carbon-now-cli` will fall back to the [default settings](https://github.com/mixn/carbon-now-cli/blob/master/src/config/cli/default-settings.config.ts).
Taken the `presentation` preset we have created above, all we have to do is:
```
carbon-now unfold.js -p presentation
```
**Result**:
### Re-using the last used settings
*It just works.* ™
Any time you use `-i`, `carbon-now-cli` will automatically re-use those settings for its next run.
So you can `carbon-now -i` and `carbon-now ` from there on — the output will always look as pretty as the one where you’ve used `-i`. 😊
### Custom theme colors
From `v2.0` onwards, `carbon-now-cli` supports the ability to define custom theme colors, i.e., what color e.g., `variable`s, `operator`s, `attribute`s, etc. should have, allowing you to have complete control over how things look to the smallest detail.
Therefore, you have to provide a key called `custom` inside one of your presets that complies to the following type:
```ts
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;
}
```
Here’s an example `~/.carbon-now.json` config that has one preset `hacker`, which makes use of 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 -p hacker
```
### Result:
### Limitations
Please note that custom theme colors won’t be applied with `--open-in-browser` because they aren’t query string parameters but instead communicated to Carbon via `localStorage`, which is solely set inside the Playwright instance.
## Local configs
It is possible to use local configuration files via the `--config` flag.
This is convenient if you’re using `carbon-now-cli` via a script and would like to share presets among the users of your project.
```
carbon-now unfold.js --config local-config.json -p dark
```
Local configs differ from `~/.carbon-now.json` in the sense that they behave in a **read-only** manner, hence:
1. `local-config.json` won’t be created if it doesn’t exist
2. `latest-preset` will not be written to `local-config.json`
## License
MIT © [Miloš Sutanovac](https://twitter.com/mixn)