タスクの道筋 / 入力から結果へ
コードを共有可能な画像に変換する方法
- 01
コードを貼り付ける
「コードソース」欄にコードを入力または貼り付けます。上限は 65,536 UTF-8 バイト、200 行、1 行あたり 240 文字までです。ラベル横のカウンターに現在のバイト数と上限が表示され、どれかを超えると該当する上限を示すメッセージで拒否されるので、何を削ればよいかが正確にわかります。
- 02
言語とテーマを選ぶ
「言語」で JavaScript、TypeScript、HTML、CSS、JSON、Bash から選び、「テーマ」を「ライト」または「ダーク」に設定します。シンタックスの配色は、対応する Shiki 文法と GitHub スタイルのテーマから得られます。「サンプルを読み込む」を押すと選択した言語の短い例が入るので、自分のコードを貼る前に見た目を比較できます。
- 03
フレームをデザインする
「背景」の色、「パディング」（16〜96 px）、「フォントサイズ」（12〜28 px）を設定し、80 文字以内の「ウィンドウタイトル」を入力します。必要に応じて「行番号を表示」を切り替え、「書き出し倍率」を 1x または 2x にします。行の高さはフォントサイズに自動で追従するので、大きな文字でも追加調整なしで読みやすさが保たれます。
- 04
プレビューを生成する
生成するとローカルの字句解析器を読み込み、実際のフォントとウィンドウタイトルを測定し、エクスポートと同じエスケープ済みSVGを表示します。コードは文字として扱われ、実行しません。編集で旧プレビューは消え、上限超過や測定不能なら出力しません。横長のプレビューはキーボードでスクロールできます。
- 05
SVG または PNG をダウンロードする
スケーラブルなベクターが必要なら「SVG をダウンロード」、ビットマップが必要なら「PNG をダウンロード」を使います。PNG は選択した倍率で Canvas を通じてレンダリングされます。どちらのファイルもローカルで生成され、選択した組み合わせが安全な書き出しサイズを超える場合は、壊れたファイルを書き出す代わりにワークスペースがその旨を通知します。