コードのスクリーンショット、Carbonなら見栄えで悩まなくなる

はじめに

技術ブログやスライド、SNSにコードを載せるとき、ターミナルやエディタのスクリーンショットをそのまま貼っていませんか。背景は真っ白、フォントはOS標準、行番号もバラバラ……見た目が整わないまま公開してしまい、あとで恥ずかしくなった経験がある人も多いはずです。

Carbonは、こうした「コードの見せ方」を一瞬で解決してくれるツールです。ブラウザにコードを貼り付けるだけで、美しい背景とシンタックスハイライト付きの画像を生成できます。本記事では、Carbonの特徴からインストール、CLIを使った実践的な活用方法までを紹介します。

Carbonとは

Carbonは、ソースコードから見栄えの良い画像を作成・共有できるオープンソースのWebツールです。Next.js製で、GitHub上で36,000を超えるスターを獲得しており、160人以上の開発者が貢献してきた息の長いプロジェクトです。公式サイト（carbon.now.sh）にアクセスすればインストール不要ですぐに使い始められます。

主な特徴

豊富なカスタマイズ - シンタックステーマ、フォント、背景色、ウィンドウの角丸や影まで細かく調整できます
多様なインポート方法 - ファイルのドラッグ&ドロップ、GitHub Gist IDの指定、直接貼り付けに対応しています
手軽な共有 - 生成した画像はURLとして保存でき、SlackやTwitter（X）に貼るとプレビューが自動展開されます

インストール

Carbon自体はブラウザで完結するツールなので、日常的な利用に「インストール」は不要です。ただし、ターミナル上のコードを毎回ブラウザにコピペするのは面倒だという人向けに、CLIから直接Carbon画像を生成できるcarbon-now-cliが公開されています。

# npmの場合
npm install -g carbon-now-cli

# yarnの場合
yarn global add carbon-now-cli

# インストールせずに一度だけ試す場合
npx carbon-now-cli <ファイルパス>

基本的な使い方

ファイルから画像を生成する

carbon-now src/utils/formatDate.js

コマンドを実行すると裏側でヘッドレスブラウザが起動し、Carbon本家と同じ高品質な画像として保存されます。DOMのスクリーンショットではなく実際のレンダリング結果を取得しているため、フォントのにじみなどがありません。

クリップボードの内容をそのまま画像化する

# macOSの場合
pbpaste | carbon-now --from-clipboard

# 行範囲を指定して一部分だけ切り出す
carbon-now src/App.tsx --start 10 --end 25

対話モードでテーマを選びながら生成する

carbon-now src/App.tsx --interactive

--interactiveを付けると、シンタックステーマや背景の設定を対話形式で選びながら画像を生成できます。毎回コマンドの引数を覚えなくて済むので、初めて使うときはこのモードが便利です。

実践的なユースケース

技術ブログのアイキャッチやコード解説画像に

記事中でコードを説明する際、テキストとして貼るだけでなくCarbonで画像化しておくと、SNSでシェアされたときの見栄えが大きく変わります。Twitter（X）などのカードプレビューでも映えるため、技術記事の拡散力を高めたいときに有効です。

プルリクエストやドキュメントでの差分説明

コードレビューで「ここが変更点です」と伝えたいとき、該当箇所だけを--startと--endで切り出してCarbon画像にすれば、行番号付きで視覚的に分かりやすい説明資料が作れます。

社内資料・登壇スライドへの組み込み

スライドにコードを貼る際、フォントやテーマを統一したCarbon画像を使うことで、資料全体のトンマナを崩さずに済みます。CLIをスクリプト化しておけば、複数ファイルの画像化もまとめて自動化できます。

まとめ

Carbonは「コードを美しい画像として共有する」というシンプルな課題を、ブラウザからでもCLIからでも手軽に解決してくれるツールです。普段使いならWeb版だけで十分ですが、ブログ執筆や資料作成のワークフローに組み込みたい場合はcarbon-now-cliの導入を検討してみてください。コードの見た目にひと手間かけるだけで、読み手に与える印象は大きく変わるはずです。