レンダリングプレビュー
スタイル設定
クラウドプリセットを確認中…
コードを共有できる画像にする方法
Snippet Studio はコードのかたまりを PNG か SVG で保存できる装飾付きカードとして描き、JavaScript・TypeScript・JSX・Python・CSS・JSON・YAML・CSV の構文を色分けします。カードはブラウザーのタブ内でベクターとして描かれるため、コードは端末を出ず、書き出した SVG はどの大きさでも文字が鮮明です。
4ステップでコード画像を作る
- コードを貼って言語を選ぶソース欄に入力または貼り付け、色分けが合うように言語を選びます。言語ごとに差し込める見本があり、すでに書いたコードを置き換える際は先に確認を求めます。
- カードの見た目を決めるエディターのテーマと背景のプリセットを選び、ウィンドウの装飾を macOS・Windows・なしから決めます。タイトルバーにファイル名を載せることもできます。
- 文字組みと枠を調整する書体、文字サイズ、余白、角の丸みを決め、行番号の表示を切り替えます。操作するたびにプレビューが描き直され、スクリプトを実行できない隔離枠の中に表示されます。
- PNGかSVGで書き出すPNG はチャット・スライド・課題管理に向きます。SVG はどの画面でも鮮明で、後から色や大きさを変えられます。カードからソースコードを取り出して複製することもできます。
Snippet Studio の使いどころ
- コードレビューや不具合報告に添える字下げが崩れる素の貼り付けの代わりに、議論している行そのものを色分けした読みやすい画像で添付します。
- スライドや文書の図版を作るSVG で書き出せば、資料を投影しても文書を印刷しても、スクリーンショットのようににじまず鮮明なままです。
- 他のツールの整形結果を見せるData Formatter で整形した JSON・YAML・CSV をそのまま引き継ぎ、一手でカードとして仕上げます。
Snippet Studio のよくある質問
- コードはどこかへ送信されますか？
- いいえ。色分けと描画はブラウザーのタブ内で動き、プリセットを保存すると選んだ場合にだけ見た目の設定が同期します。ソースコード・ファイル名・描画結果・クリップボードの内容はローカルに留まります。
- 構文の色分けに対応する言語は？
- JavaScript、TypeScript、JSX、Python、CSS、JSON、YAML、CSV です。それ以外も失敗せず一般的な色分けに切り替わってカードになります。
- PNGとSVGはどちらを選べばよいですか？
- 画像をそのまま貼る場所には PNG が安全です。SVG はベクターなので拡大しても印刷しても鮮明で、ファイル内で文字が本物の文字として残ります。
- これはコードエディターですか？
- いいえ。見せるための道具で、補完も静的検査もコードの実行もありません。コードは普段の場所で書き、画像にするときにここへ貼ってください。
- 画像をSNSへ直接投稿できますか？
- できません。Snippet Studio はファイルやクリップボード上の画像を作るところまでです。共有は自分で行うため、書き出しの副作用で何かが公開されることもありません。
- 再読み込みすると作業中の内容はどうなりますか？
- この端末にローカルの下書きが復元されるので再読み込みでスニペットを失わず、作業中の編集は取り消しとやり直しで扱えます。