CodeCard
コードスニペットを、ブラウザ上で100%ローカルに、美しい共有用のスクリーンショット画像に変換します。
6 行 · ソースファイルをドロップするか、コードを貼り付けてください。
またはプレビューの行番号をクリックします。Shift+クリックで範囲、Alt+クリックで反転、右クリックで解除。
ライブプレビュー
使い方
コードを貼るかドロップ
入力・貼り付け・ファイルのドロップから選べます。ドロップしたファイルは待機し、サイズと行数を表示。ボタンを押すまで読み込みません。
見た目を整えて重要な行を選ぶ
10種のテーマ、9種のグラデーションまたは任意の色、5種のウィンドウ枠。行番号をクリックすればその行を強調し、他を暗くできます。
書き出すか次のツールへ送る
PNG・JPEG・WebP・ベクターSVG に最大4倍で書き出し。クリップボードへ直接コピーするか、ダウンロードせずに CompressSnap・CropSnap・WatermarkSnap へ渡せます。
本物のシンタックス、48言語
ハイライトは Prism の生のトークンストリームを読むため、JavaScript・Rust・Zig・Terraform・Dockerfile ほか43言語が正しい色で表示されます。ダウンロードされるのは選んだ文法だけです。
大事な行を目立たせる
行番号をクリックすればその行を強調し、他を暗くできます。Shift+クリックで範囲、Alt+クリックで選択全体を反転、右クリックで解除。
何も切り取られない書き出し
撮影前にカードを実寸の幅で測るため、長い行もプレビューの端で切れずに書き出されます。PNG・JPEG・WebP・ベクターSVG、最大4倍。
ローカルで、本当にオフライン
フォントも文法もこのサイトから配信され、外部CDNは使いません。ページさえ読み込めば、ネットを切ってもハイライトと書き出しが動きます。
よくある質問
他のツールで長い行が切れていたのはなぜ?+
多くのツールはレイアウトされたままの DOM を撮るからです。横スクロールバー付きのコードブロックは見えている部分しかレイアウトされません。CodeCard は撮影前にカードを切り取られていない実寸の幅で測ります。
特定の行をハイライトするには?+
プレビューの行番号をクリックすると、その行が強調され他が暗くなります。Shift+クリックで範囲を拡張、Alt+クリックで選択全体を反転、右クリックで解除。3, 7-9, 12 のような範囲を入力することもできます。
対応言語は?+
48言語。JavaScript、TypeScript、JSX/TSX、Python、Rust、Go、Zig、C、C++、C#、Java、Kotlin、Swift、Ruby、PHP、SQL、YAML、TOML、Terraform、Dockerfile、Bash、PowerShell、Markdown、unified diff などです。ダウンロードされるのは選んだ言語の文法だけです。
CodeCard はオフラインで使えますか?+
はい。等幅フォントも構文文法も外部CDNではなくこのサイトから配信しているので、ページさえ読み込めば、ネットがなくてもハイライトと書き出しが動きます。
コードは安全ですか?+
コードはどこにも送信されません。ハイライト、レイアウト、画像の描画はすべてブラウザー内で行われ、アップロードも記録もありません。
いちばん鮮明な書き出し設定は?+
ラスターで使うなら PNG の3倍か4倍。出力先がベクターを扱えるなら SVG を選んでください。どのサイズでも鮮明で、たいていは4倍 PNG より軽くなります。
美しいコードスクリーンショット画像をオンラインで作成
ソーシャルメディアやプレゼンテーションで生のテキストコードを共有するのは退屈に見えがちです。CodeCardは、ソースコードをエレガントなデザイナーカードに瞬時に変換します。余白、影、フォント、ウィンドウフレームを調整して、パーソナルブランドに合わせましょう。
- PNG・JPEG・WebP・ベクターSVG、最大4倍
- フォントと文法を自前配信、オフラインでも動作
- アカウント不要。ウォーターマークは既定でオフ
高速で安全なローカル生成
CodeCardはクライアントサイドレン더リング機能を使用し、完全にWebブラウザ内で動作します。ファイルやテキストがコンピュータから送信されることはありません。
ソーシャルメディア、ブログ、スライドに最適
Twitter/Xのテックインフルエンサー、技術記事を書くソフトウェアエンジニア、プレゼンスライドを作成する講師に最適です。美しいレイアウトはエンゲージメント率を倍増させます。
厳格なプライバシー保証
コードを外部サーバーに送信する他のツールとは異なり、CodeCardはすべてのハイライト処理とレイアウト生成をブラウザ内部で行います。秘密鍵やソースコードの知的財産は100%安全に保たれます。
Prism のトークンストリームを基盤に
仕上がった HTML を受け取るのではなく、CodeCard は生のトークンストリームを読み、行単位でコードを組み直します。正確な行番号、行ごとのハイライト、ぶら下げインデントの折り返し、切れない書き出しはこれによって実現しています。