コードを画像に変換 - コードスニペットを美しい画像に
コードスニペットをシンタックスハイライト付きの共有可能な画像に変換。テーマ、フォント、背景を選択 — Carbon代替ツール。
よくある質問
コード-画像変換ツールとは何ですか？なぜ使うのですか？
コード-画像変換ツールは、ソースコードスニペットをシンタックスハイライト、テーマ背景、ウィンドウクロム装飾が施されたビジュアルスタイルの画像に変換します。開発者はこれらの画像を、コードフォーマットがネイティブサポートされていないソーシャルメディアプラットフォームでのコード共有、ブログ記事やドキュメントの視覚的に一貫したコード例の作成、技術プレゼンテーション用の洗練されたスライドの制作に使用します。
このコード-画像ツールはどのように使いますか？
左側のエディタにコードを貼り付けるか入力し、ドロップダウンからプログラミング言語を選択し、シンタックスハイライトテーマを選び、背景色やグラデーション、ウィンドウスタイル、パディング、フォントサイズをカスタマイズし、右側でリアルタイムプレビューを確認し、PNGダウンロード、SVGダウンロード、またはクリップボードにコピーをクリックします。
コードは安全ですか？サーバーに送信されますか？
コードは100%安全で、ブラウザから外に出ることはありません。すべてのシンタックスハイライトはShikiを使用してクライアントサイドで実行され、画像生成はhtml-to-imageライブラリを使用してブラウザ内で完全にPNGまたはSVGに変換します。コード、画像、データはどのサーバーにも送信されません。
PNGとSVGエクスポートの違いは何ですか？
PNGは固定解像度でピクセルベースの画像を生成するラスター画像フォーマットです。このツールはデフォルトでRetina品質の出力のために2倍スケールでPNGをエクスポートします。SVGは品質劣化なしにどのサイズにもスケーリングできるベクターフォーマットで、印刷物、プレゼンテーション、ドキュメントに最適です。
どのプログラミング言語がサポートされていますか？
このツールはJavaScript、TypeScript、Python、Go、Rust、Java、C、C++、C#、PHP、Ruby、Swift、Kotlin、Dart、HTML、CSS、SQL、Bash、JSON、YAMLなど30以上の人気プログラミング言語をサポートしています。シンタックスハイライトはVisual Studio Codeと同じTextMateグラマーを使用するShikiによって駆動されます。
最高品質の出力を得るにはどうすればよいですか？
最高品質の画像には：Retinaディスプレイ用に2xまたは3xエクスポートスケールを使用し、コントラストの良いテーマを選択し、適切なパディング（48pxまたは64px）を使用し、ドロップシャドウを有効にしてください。印刷やプレゼンテーションには、どのサイズでも完璧なスケーリングのためにSVGでエクスポートしてください。
生成した画像を商用利用できますか？
はい、生成した画像は完全にあなたのものです。すべての処理がブラウザで行われ、このツールはウォーターマークやブランディング要件なしで無料のため、商用ブログ記事、有料コース、クライアントプレゼンテーション、製品ドキュメントなど、あらゆる目的で出力画像を使用できます。
どのようなテーマとカスタマイズオプションがありますか？
ツールは人気エディタから13以上のシンタックスハイライトテーマ、3つのウィンドウクロムスタイル（macOS、Windows、なし）、カラーピッカー付きの単色またはグラデーション背景、パディングオプション、フォントサイズ、等幅フォント、行番号トグル、ドロップシャドウトグル、オプションのウォーターマークテキストを提供します。
コード例
// Code to Image using Shiki + html-to-image
import { codeToHtml } from 'shiki';
import { toPng, toSvg } from 'html-to-image';
// Generate syntax-highlighted HTML
async function highlightCode(code, lang = 'javascript', theme = 'dracula') {
return await codeToHtml(code, { lang, theme });
}
// Export DOM node as PNG
async function exportToPNG(node, scale = 2) {
const dataUrl = await toPng(node, {
pixelRatio: scale,
quality: 1.0,
});
const link = document.createElement('a');
link.download = 'code-snippet.png';
link.href = dataUrl;
link.click();
}
// Copy image to clipboard
async function copyToClipboard(node) {
const dataUrl = await toPng(node, { pixelRatio: 2 });
const res = await fetch(dataUrl);
const blob = await res.blob();
await navigator.clipboard.write([
new ClipboardItem({ 'image/png': blob }),
]);
}