ソースコードのスクショが撮れるWebサービス「Carbon」



シンタックスハイライトされた ソースコードのスクリーンショット画像が作成できる Webサービス「Carbon」の紹介です。

 ソースコードの画像を使う場面は限られてきますが、プログラミング系の記事や、APIドキュメントのTOP画面、場合によっては そのような画像があったほうが相手に伝えやすい時もあります。

お使いのテキストエディタのスクショを撮るのも1つの手ですが、もっと簡単に便利にテキストエディットの画像が作成できるサービスが「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レポジトリ

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ