コードを画像化してTwitterなどで共有したいときに便利なVSCode拡張機能「Codesnap」

VSCodeでコードを画像化してTwitterなどで共有するときに便利な拡張機能「Codesnap」 ツール / 環境
この記事は約2分で読めます。
スポンサーリンク

どうも上かるびです。

よくTwitterで見かけるこのような画像。

おしゃれですよね。

今回はこのような画像を簡単に出力できるVSCodeの拡張機能をご紹介します。

拡張機能「Codesnap」

VSCodeのマーケットでインストールします。

Ctrl + Shift +Pから「codesnap」を選択、該当コードをドラッグして虹色のシャッターボタンを押すと画像として保存できます。

実際の動作デモ

オプションも豊富

カスタマイズもいくつか可能です。行番号を表示するかどうかを切り替えたり、背景色やシャドウの色を変えられたりします。

Real Line NumbersをONにすると実際のコードの行がそのまま反映されます。OFFの場合は1からスタートになります。

きっかけの拡張機能「Polacode」はなぜか動かなかった

今回の拡張機能を入れるきっかけは、フォロワーさんたちの会話の中で見かけた下記記事となります。

Twitterでコード共有する時に便利かも「Polacode」 - Qiita
はじめに Polacodeっていうvscodeの拡張が便利です。 外国人の人がナイスな感じにコードを貼り付けているのをよく目にして気になっていたんですよね。 こんな感じのやつ。 ちょっと雰囲気違うけど^^; 他にもツ...

しかしこちらで紹介されている「Polacode」は、私のPC(Windows10 , VSCode ver.1,67 , 2022年5月8日時点)では動きませんでした。

動かなかったもの

なお類似の「Polacode-2020」の方は正常に動きました。

ただこちらはオプションがシャドウと背景色の変更(透明にするかどうか)のみとなっています。

個人的にはCodesnapの方が使い勝手が良さそうだと感じました。

オンライン上でもできる

ちなみに今回の拡張機能を知るまではオンライン上で生成できるツールを使っていました。

Carbon | Create and share beautiful images of your source code
Carbon is the easiest way to create and share beautiful images of your source code.

これはこれでテーマの配色などをすぐに変えられる点が良いです。

ぜひ活用してみてください。

コメント

タイトルとURLをコピーしました