snipgrapher

使用するタイミング

次の用途にこのスキルを使用します。

• ソースコードから画像スニペットを生成する
• 再利用可能なスニペットのレンダリング設定を構成する
• ドキュメント、ソーシャル投稿、変更履歴向けのスニペットアセットを一括でレンダリングする
• npm で公開されている snipgrapher を使用してスニペット画像を生成する

クイックスタート

設定なしですぐに、単一ファイルを PNG にレンダリングします。

npx snipgrapher render file.ts -o output.png

継続して使用する場合は、まずプロジェクト設定を初期化してからレンダリングします。

npx snipgrapher init          # creates snipgrapher.config.json
npx snipgrapher render file.ts --profile default -o output.png

レンダリング後、処理が成功したと判断する前に、出力が存在し、サイズが 0 ではないことを確認します。

ls -lh output.png   # confirm file exists and size > 0

使用方法

次のルールファイルを順番に読みます。

• rules/setup-and-configuration.md - インストール、実行ファイルの選択、設定の初期化、プロファイルの定義
• rules/rendering-workflows.md - 単一スニペットのレンダリング、一括処理、監視モード、出力のベストプラクティス

基本原則

• まず設定する：繰り返しレンダリングする前に、プロジェクト設定を用意します
• 再現可能な出力：名前付きプロファイルと明示的な出力パスを優先します
• ポータブルなコマンド：インストール済みのバイナリと npx の両方で動作するコマンドパターンを使用します
• 自動化への対応：CLI フラグ、設定、環境変数の優先順位を意図的に活用します

よくあるレンダリング失敗のトラブルシューティング

レンダリングが失敗した場合や、予期しない出力が生成された場合は、次のよくある原因を確認します。

• フォントが見つからない：プロファイルまたは設定で指定したカスタムフォントがシステムにインストールされていることを確認します
• 未対応の構文：snipgrapher がその言語や拡張子に対応していることを確認します。対応していない場合は、プレーンテキストのハイライトに切り替えます
• 空または破損した出力：--verbose（対応している場合）を付けて再実行し、エラーの詳細を表示します。また、入力ファイルが読み取り可能で空ではないことを確認します
• プロファイルが見つからない：設定ファイルが存在しないか、形式が正しくない場合は、npx snipgrapher init を実行して snipgrapher.config.json を再生成します