コードの画像化
Code Screenshot
コードの断片を、構文の色分け・ウィンドウ枠・選んだテーマを付けた画像にします。
コードの断片を、スライドやissue、投稿に置けるPNGにします。構文の色分けを付け、ウィンドウの枠に収め、選んだ書き出し倍率で出します。ここではキャンバスの上に描いています。アップロードもしませんし、外部のシンタックスハイライターを読み込むこともありません。
コード
プレビュー
このツールがすること
- · 構文の色分けは、このサイトの整形ツールが使うトークナイザー（JavaScript・TypeScript・CSS・HTML・SQL）と、ここで書いた小さなトークナイザー（JSON・Python・Go・Rust・Shell）が行います。外部のハイライターは読み込みません。
- · 文字は、お使いの端末にある等幅フォントでキャンバスへ直接描きます。韓国語はシステムの韓国語フォントに切り替わるので、四角い箱ではなく文字として出ますし、韓国語と絵文字は折り返しのときに二文字分として数えます。フォントは端末ごとに違うので、同じコードでも端末によって少し違って見えます。
- · PNG は 1×・2×・3× の倍率で作り、どこにもアップロードしません。
使い方
コードを貼り付けます
言語は自動で判別しますし、自分で指定し直すこともできます。色分けには、JS・TS・CSS・HTML・SQLについてはこのサイトのフォーマッタと同じトークナイザを使い、JSON・Python・Go・Rust・Shellには小さなものを使います。
枠を決めます
テーマ、文字の大きさ、余白、ウィンドウのタイトル、信号機のような丸を付けるかどうか、行番号、影。プレビューは1倍での書き出しそのものです。
長い行の折り返し幅を選びます
折り返すとき、日本語と絵文字はターミナルが数えるのと同じように2セル分として数えます。だから文字種の混じった行も、見た目どおりの場所で折れます。
大きさを変えられる場所に置くなら2倍で書き出します
幅の固定されたブログなら1倍、スライドや高精細の画面なら2倍、拡大されるなら3倍です。あるいは、画像をそのままクリップボードにコピーします。
よくある質問
別のパソコンで見ると違って見えるのはなぜですか
文字を、その端末にある等幅フォントで描いているからです。まったく同じものを持っている機械は2つとありません。とくに日本語は、入っている日本語のフォントに落ちます。その代わり、何もダウンロードせず、描画がすぐ終わります。
SVGでもらえますか
もらえません。PNGだけです。SVGでどこでも同じに見せるにはフォントを埋め込む必要がありますが、日本語のフォントを埋め込めばメガバイト単位になります。2倍のPNGのほうが小さく、どこでも同じように表示されます。
そもそもコードのスクリーンショットを投稿してよいのでしょうか
スライドやSNSの投稿なら、はい。バグの報告やプルリクエストなら、テキストを貼り付けてください。画像は検索できませんし、コピーもできませんし、差分も取れませんし、スクリーンリーダーにも読めません。このツールは前者のためのものです。
ここから渡せます
JavaScript整形・圧縮
JavaScript Beautifier & Minifier
名前は一切変えずにJavaScriptやTypeScriptからコメントと空白だけを落とし、1行に潰れたバンドルは読めるところまでインデントし直します。
アスキー表の生成
ASCII Table Generator
表を等幅のアスキー・Markdown・罫線文字の枠で描き、READMEやコメントに貼れる形にします。
アスキーアート文字
ASCII Text Art
テキストをfiglet系の書体から選んだ大きなアスキー文字に起こし、バナーやコミットメッセージに使えるようにします。
アスキー図エディタ
ASCII Diagram Editor
文字グリッド上に箱・線・矢印・ラベルを描きます。角と交差は隣接セルの有無から自動で決まり、Unicode罫線と純ASCIIを切り替えられます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
アスキー表の生成
ASCII Table Generator
表を等幅のアスキー・Markdown・罫線文字の枠で描き、READMEやコメントに貼れる形にします。
デバイスモックアップ
Device Mockup
スクリーンショットをスマホ・タブレット・ノートPC・ブラウザの枠にはめ、背景と影を添えます。
JavaScript整形・圧縮
JavaScript Beautifier & Minifier
名前は一切変えずにJavaScriptやTypeScriptからコメントと空白だけを落とし、1行に潰れたバンドルは読めるところまでインデントし直します。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
Base64エンコード・デコード
Base64 Encoder & Decoder
テキストでもファイルでもBase64とBase64URLを符号化・復号し、UTF-8も正しく扱います。
JSON⇄CSV変換
JSON ⇄ CSV
入れ子のJSONをドット記法の列名で平らに開くか、表からオブジェクトを組み直します。