Softonic

コードを画像に変換

ステップ 1 / 2

コードスニペットを貼り付け、4つの組み込みテーマから選び、色、フォントサイズ、余白、任意のヘッダー、行番号を調整して、ブラウザの canvas から描画した PNG をダウンロードできます。このツールはプレーンテキストを描画するため、すっきりしたコード画像作成には便利ですが、言語解析や構文ハイライトは行いません。

コード PNG の作り方

  1. 1

    スニペットを貼り付ける

    JavaScript、HTML、CSS、JSON、shell コマンド、その他のプレーンテキストをコード欄に貼り付けます。描画対象は先頭400行までです。

  2. 2

    見た目を整える

    ダーク、ライト、Dracula、Solarized から選び、タイトル、フォントサイズ、余白、背景、文字色、アクセントカラーを調整します。

  3. 3

    canvas を確認する

    ブラウザが各行を canvas テキストとして描画します。ウィンドウ風ヘッダーと行番号は任意です。長い行は canvas を組み込みの最大幅まで広げることがあります。

  4. 4

    PNG をダウンロード

    現在の canvas を PNG 画像として出力し、ドキュメント、メモ、スライド、投稿に使えます。SVG、JPEG、HTML の書き出しはありません。

レンダラーの動作

操作 変更できる内容 メモ
テーマ ダーク、ライト、Dracula、Solarized 各テーマは背景、文字、アクセントの初期色を設定します。
テキストスタイル タイトル、フォントサイズ、余白 フォントサイズは10–40 px、余白は20–200 pxに制限されます。
色 背景、文字、アクセント アクセントカラーは行番号に使われます。
ヘッダー ウィンドウ風ヘッダーの表示切り替え 有効にするとタイトルがヘッダーに表示されます。
行番号 表示または非表示 行番号は通常の canvas テキストとして描画されます。
出力 PNG ダウンロード ダウンロードボタンは現在の canvas を PNG 画像として保存します。

実用上の制限

  • ブラウザは Canvas API でスニペットをプレーンテキストとして描画します。JavaScript、Python、HTML などの言語は判別しません。
  • 非常に大きなファイルでページが固まらないよう、プレビューは先頭400行を使います。
  • canvas の幅は420 pxから2200 pxの範囲に収まります。非常に長い行は最大幅に達することがあります。
  • 2ステップ版では、編集からダウンロードへ進む間、現在のブラウザタブ用に入力内容を sessionStorage に保存します。

アクセシビリティの注意

画像内のコードは検索、コピー、スクリーンリーダーでの読み上げができません。PNG は視覚的な補助として使い、ドキュメント、チュートリアル、バグ報告では実際のスニペットを選択可能なテキストとして近くに置いてください。

よくある質問

いいえ。貼り付けた文字列をそのまま canvas に描画します。色やテーマは変更できますが、言語選択や構文解析はありません。

メニューにはダーク、ライト、Dracula、Solarized があります。テーマを選んだあとも、背景、文字色、アクセントカラーは上書きできます。

いいえ。出力は canvas から作成する PNG ダウンロードのみです。SVG、JPEG、HTML としてコピーする機能はありません。

ブラウザの応答性を保つため、プレビューは先頭400行を描画します。公開用の画像では、意図が伝わる数行に絞るほうが読みやすくなります。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

このツールは他の言語でも利用できます