シンタックスハイライトされた ソースコードのスクリーンショット画像が作成できる Webサービス「Carbon」の紹介です。
ソースコードの画像を使う場面は限られてきますが、プログラミング系の記事や、APIドキュメントのTOP画面、場合によっては そのような画像があったほうが相手に伝えやすい時もあります。
お使いのテキストエディタのスクショを撮るのも１つの手ですが、もっと簡単に便利にテキストエディットの画像が作成できるサービスが「Carbon」です。
Carbon で出来ること
- ハイライトされたソースコードの画像が作成できます
* Carbonを使って作成したコードのスクショ
Carbon の使い方
Carbonは直感的な操作で簡単に使うことが出来ます。
サービスのエディタ部分が編集可能なフォームになっており、コードを入力後 ' Save Image ' ボタンを押せば png 形式でコードのスクリーンショットが保存できます。
* Carbonの編集画面
Carbonは内部に ' highlight.js ' が使われており、多数のプログラミング言語のハイライトにも対応されています。また、エディタテーマ、背景のカラーやフォントの変更、ラインナンバーを追加したりなど、その他にも細かなことが出来ます。
* エディタのテーマと背景色を変更、ラインナンバーを追加してみました
Carbon をローカル環境に導入
Carbonは node.jsで開発されており、オープンソースとして公開されているので ローカル環境にも導入することができます。
* パッケージの導入には git + node.js + ビルドの為に yarn が導入されている必要があります
# レポジトリをクローン
git clone https://github.com/dawnlabs/carbon.git
# ディレクトリ移動
cd carbon
# 依存パッケージのインストール
yarn install
# アセットファイルのビルド、サーバーの起動
# http://localhost:3000にアクセスすればCarbonを使用することが出来ます
yarn dev
Summary
mediumなどのシンタックスハイライトが無いブログや、APIドキュメント内、その他パワーポイントで使うなど、色々な場面で役に立ちそうなサービスです。
サービスページ / GitHubレポジトリ
