Charm がまた最高なツールを出してました。

例えばこういうコマンドを実行すると、

$ freeze main.js \
    --window \
    --show-line-numbers \
    --border.radius 8 \
    --shadow.blur 4 \
    --margin 12

こういう画像を作れます。

こういうの

この記事では Freeze の基本的な使い方について簡単に紹介します。

インストール
基本的な使い方
コマンドの実行結果を画像化
見た目のカスタマイズ
まとめ

インストール

Homebrew を使用している場合は brew install でインストールできます。

$ brew install charmbracelet/tap/freeze

もしくは go install でインストールすることもできます。

$ go install github.com/charmbracelet/freeze@latest

その他のインストール方法については公式の README をご参照ください。

基本的な使い方

基本的には以下のように、 freeze コマンドに画像化したいファイルを渡すだけです。

$ freeze <ファイル名>
# 例
$ freeze main.js

今回は以下のような内容の main.js を例にします。

main.js

function fibonacci(length) {
  let nums = [0, 1];
  for (let i = 2; i < length; i++) {
    nums[i] = nums[i - 1] + nums[i - 2];
  }
  return nums;
}

console.log(fibonacci(10));
// => [
//      0, 1,  1,  2,  3,
//      5, 8, 13, 21, 34
//    ]

freeze コマンドを実行してみます。

$ freeze main.js

次のような画像が freeze.png という名前で保存されます。

出力された画像

素敵ですね。

画像はデフォルトでは freeze.png という名前で保存されますが、 -o もしくは --output フラグで名前を指定することもできます。

# hoge.png という名前で保存
$ freeze main.js --output hoge.png

また、保存ファイル名の拡張子によって画像形式を指定することもできます。
v0.1.6 時点では PNG, WebP, SVG に対応しています。

# PNG 形式で保存
$ freeze main.js --output out.png
# WebP 形式で保存
$ freeze main.js --output out.webp
# SVG 形式で保存
$ freeze main.js --output out.svg

コマンドの実行結果を画像化

Freeze が画像化できるのはファイルだけではありません。
--execute フラグにコマンドを指定すると、そのコマンドの出力を画像化することもできます。

# eza を実行してみる
$ freeze --execute 'eza -alh'

ちゃんと色もつく

すごい。

見た目のカスタマイズ

フラグによって画像の見た目をカスタマイズすることができます。
ここではいくつかの例を紹介します。

フォント

--font.family フラグでフォントを指定することができます。
デフォルトは JetBrains Mono です。

今回は例として Unifont を指定してみます。

# Unifont を指定 (ローカルにフォントがインストールされている必要があります)
$ freeze main.js --font.family 'Unifont'

出力された画像

mac のウィンドウっぽくする

--window フラグを指定すると mac のウィンドウっぽくなります。

$ freeze main.js --window

出力された画像

枠線

枠線を設定することもできます。

--border.width : 枠線の幅
--border.color : 枠線の色
--border.radius : 角の丸み

$ freeze main.js --border.width 8 --border.color "#ff0000" --border.radius 8

出力された画像

行番号

--show-line-numbers フラグを指定すると行番号が表示されます。

$ freeze main.js --show-line-numbers

出力された画像

ここで紹介したのは一部ですが、他にも様々なオプションが用意されています。

シンタックスハイライトのテーマ
影
margin, padding
フォントサイズ
etc...

詳しくは公式の README をご参照ください。

設定ファイル

毎回フラグを指定するのは面倒なので、自分で設定ファイルを作成して使い回すことも可能です。

例えば freeze --interactive を実行すると対話的に設定を行うことができます。

公式の README より引用

freeze --interactive で行った設定はローカルに保存され、次回以降は -c もしくは --config フラグに user を指定することで再利用することができます。

# `freeze --interactive` で作成した設定を使う
$ freeze main.js --config user

デフォルトで用意されている設定もあります。
例えば -c もしくは --config フラグに full を指定すると mac のスクショっぽくなります。

$ freeze main.js --config full

mac のスクショっぽい

設定ファイルについて詳しくは公式の README をご参照ください。

まとめ

最高すぎます。
Charm は他にも最高なツールや Go ライブラリをたくさん出しているので、興味があればこれらもチェックしてみてください。

https://charm.sh

Discussion