Markdownを画像に変換
Markdownを貼り付けてレンダリング画像を書き出せます — カラーテーマを適用し、背景色や解像度を調整して、「形式を選んでダウンロード」メニューからPNG、JPEG、WEBP、SVGを選ぶだけで、共有しやすいカードをブラウザから直接保存できます。
すべての処理はブラウザ内で完結します — ファイルが外部に送信されることはありません。
レンダリングと画像エクスポートは、いずれもオープンソースのhtml-to-imageライブラリを使ってすべてブラウザ内で完結します — アップロードは行われません。JPEGとWEBPは常に不透明な背景で描画され(アルファチャンネルなし)、PNGとSVGは透過でエクスポートできます。上でテーマを選ぶとエクスポートされるカードの配色が変わり、背景色ピッカーもそのテーマの背景色にリセットされます(その後も手動で上書き可能です)。
使い方
- 01左側のペインにMarkdownを貼り付けるか入力するか、.mdファイルをアップロードするか、「URLから開く」でWeb上のファイルを読み込みます。
- 02右側のペインにリアルタイムでスタイル付きプレビューが表示されます — これがそのまま書き出される内容です。
- 03カラーテーマを選び、必要に応じて背景色・透明度・解像度(1x/2x/3x)を調整します。
- 04「形式を選んでダウンロード」をクリックしてPNG、JPEG、WEBP、SVGのいずれかを選んで画像を保存します。すべてブラウザ内で処理され、あなたのMarkdownがブラウザの外に出ることはありません。
よくある質問
対応している画像形式は?
PNG、JPEG、WEBP、SVGで、いずれも「形式を選んでダウンロード」メニューに表示されます。PNGとSVGは透明な背景にできます。JPEGとWEBPはどのビューアーでも確実に透明度をサポートしているわけではないため、常に不透明な背景色でレンダリングされます。
透明な背景で書き出せますか?
はい、PNGとSVGでは可能です — ツールバーの「透過」にチェックを入れてください。チェックを入れると、「形式を選んでダウンロード」メニューのJPEGとWEBPの項目は無効になります(「透過なし」と表示されます)。どちらの形式もPNG/SVGのように透明度を表現できないため、常に選択した背景色(デフォルトは白)が使われます。
書き出すカードの配色を変更できますか?
はい — ツールバーの「テーマ」ドロップダウンからテーマを選ぶと、書き出されるカードの背景、テキスト、枠線、リンクの色が変わります。テーマを選ぶと背景色ピッカーもそのテーマ本来の背景色にリセットされますが、その後手動で上書きすることもできます。デフォルトテーマは元のニュートラルな「紙」のような見た目を保ちます。
画像の鮮明さはどう調整しますか?
「スケール」(1x/2x/3x)で調整します。デバイスピクセル比のように、書き出される画像のピクセル密度を倍にします — 2x(デフォルト)はほとんどの画面できれいに見え、3xは印刷や高DPIディスプレイに便利です。
書き出せるMarkdownの量に制限はありますか?
厳密な上限はありません — 書き出される画像は、スクロール可能なプレビューペインで現在見えている範囲だけでなく、文書全体のレンダリング後の高さをすべてキャプチャします。非常に長い文書は非常に縦長の画像になります。
Markdownはサーバーにアップロードされますか?
いいえ。レンダリングと画像生成は、オープンソースのhtml-to-imageライブラリを使ってすべてブラウザ内で行われます。ネットワークへの送信は一切ありません(「URLから開く」でリモートファイルを取得する場合を除きます。これはブラウザからの直接リクエストであり、サーバー経由ではありません)。
レンダリングに制限はありますか?
これは実際のDOMレンダリングをキャプチャするものであり、ピクセル完全なデザインツールではありません — 見出し、リスト、テーブル、コードブロック、リンクなどほとんどのMarkdownはきれいにレンダリングされます。寛容なCORSヘッダーを持たないサイトでホストされている画像(一部のバッジやロゴでよくあります)は書き出しファイルに埋め込めません。それでも書き出し自体は成功し、該当の画像は空白として表示され、いくつスキップされたかを知らせる通知が表示されます。