Carbonで美しいソースコード画像を簡単に作成

Twitterやその他のソーシャルメディアプラットフォームは、便利なソースコードの小さな断片を共有するための優れた方法です。これらのサンプルを、きれいな色や派手な装飾で少し飾り立てるのはいいことです。

Carbon Webアプリを使用すると、ソースコードサンプルの画像を作成できます。構文の強調表示、さまざまなフォント、テーマなど、いくつかの機能を提供します。次に、コード画像をMediumにコピーしたり、ツイートしたり、画像ファイルとして保存したりできます。

カーボン使用の基本

Carbonホームページでは、メインテキストボックスにいくつかのサンプルコードが表示されます。これはすでにサービスの便利なデモンストレーションです。作成できる画像の種類の正確なプレビューが表示されます。

コードを入力することから始めます。テキストエディタからコピーして貼り付けるか、直接入力することができます。テキストボックスが最長の行の幅まで拡大することに注意してください。

ソースコード画像をカスタマイズする方法

Carbonは、構文が強調表示された色付きのテキストを使用して、ソースコードの画像を作成します。これは、背景色または画像の上にある基本的なウィンドウにコードを表示します。

テーマ設定を使用すると、事前定義された範囲からテキストカラーパレットを適用できます。これらのテーマの多くは、テキストエディタやその他の既存のソフトウェアで一般的に使用されています。

言語設定はデフォルトで自動であるため、Carbonは言語を推測しようとします。ただし、ドロップダウンから特定の言語を選択することをお勧めします。一部の言語は、ソースコードだけから検出するのは困難です。

下位レベルでは、Carbonは最終的なコードイメージを微調整するためのさまざまなスタイル設定を提供します。これらはすべて、歯車アイコンのある設定メニューから利用できます。

15種類の等幅フォントの範囲から選択できます。画像にウィンドウコントロールを含めて、その幅やコードウィンドウの周囲のパディングを変更できます。行の高さ、フォントサイズを変更したり、行番号を含めたりすることもできます。サービスを頻繁に使用する場合は、後で使用するために設定をプリセットとして保存できます。

CarbonとGitHubの要点の統合

非常に便利な機能を使用すると、 GitHubGistからソースコードを読み込むことができます。これを行うには、Gist IDをCarbonのドメインに追加して、次の形式のURLを取得します。

 https://carbon.now.sh/ea85abfb66e419ffd45564abd5bba3e7

その後、CarbonはそのGistからソースコードをインポートし、直接入力した場合と同じように自由に操作できます。

Carbonからコードイメージをエクスポートする方法

コードサンプルを好みに合わせて構成したら、それを利用します。ここには2つの主なオプションがあります:ツイートするか、ファイルとして保存します。

Carbonの主な目的は、Twitterに投稿されたコード画像を改善することであるため、最初のエクスポートオプションとしてツイートを提示します。ツイートのボタンを押すと、ポップアップウィンドウにつぶやきの作成ダイアログが開きます。ツイートには、ツイートを送信したときにアップロードされた画像に変換されるURLが事前に入力されています。それ以外にも、必要に応じてツイートを編集できます。

画像をファイルとしてダウンロードすると、柔軟性が少し向上します。 PNGまたはSVGとしてエクスポートし、サイズを拡大縮小することができます。

Carbonでは、作成した画像をコピーして貼り付けることもできます。中程度の投稿にコードを埋め込んだり、画像をImgurにアップロードしたりできるオプションが含まれています。

画像でソースコードを共有する利点

ソースコードを画像として共有することにはいくつかの利点があります。特にTwitterの場合、ツイートの最大長を回避するのに役立ちます。理論的には、Twitterのテキスト制限で許可されているよりもはるかに多くのコードを含む画像を作成できます。

関連:より長いツイートを書く方法

Carbonの主な機能は、構文の強調表示です。現在、Twitterや他の多くのサービスでプレーンテキストをシンタックスハイライトすることはできません。

ソースコード画像は、ソースコードテキストよりも共有と保存が少し簡単です。しかし、ソースコードのコピーを思いとどまらせる可能性があります。これは良いことかもしれません。あなたは、人々が実際に何をしているのかを理解せずにあなたのコードをコピーすることができるのではないかと心配するかもしれません。

画像にソースコードを埋め込むことの欠点

画像はテキストよりもはるかに多くのストレージスペースを占有します。画像からテキスト抽出することは可能ですが、それでも余分な労力が必要です。

最も重要なことは、画像内のテキストは、それを見ることができない人がアクセスできないことが多いことです。たとえば、スクリーンリーダーは、そのようなテキストにアクセスできない場合があります。 CarbonのTweetボタンは、この問題を軽減する代替テキストを自動的に提供します。

Carbonを使用してコードスニペットを共有する

Carbonを使用すると、ソースコードスニペットの魅力的な画像を簡単に作成できます。これは、十分なカスタマイズを行って1つの特定のタスクに焦点を当てたシンプルなWebアプリです。

Carbonは、ソースコードテキストを画像に変換しますが、これが常に適切であるとは限りません。コードを実際のテキストとして共有したい場合は、多くのオプションがあります。