Markdown を PNG にする：README の作例
架空の Atlas Notes の README を使い、Markdown を PNG に書き出します。独立して意味が通る抜粋を選び、内側のコードフェンスを保ちながら、見出し、コマンド、折り返しを確認します。掲載先の表示サイズで読み直し、画像の説明と README 全文への案内を添える手順です。
README は文書として役立ち、その一部でリリース投稿のプロジェクト紹介もできます。実際の公開リポジトリでは GitHub README から画像を開き、GitHub の URL を入力して README を取得してから、確認や編集、書き出しを進めます。次の架空の例をそのまま試す場合は Markdown コンバーターを使ってください。単独で意味が伝わる部分を選びましょう。
プロジェクトのカードでは「何か」「どう始めるか」「次にどこを読むか」の三つが分かると便利です。次の例は、架空のノートプロジェクト Atlas Notes を使います。タイトル、一文の説明、開始コマンド、短い機能一覧で、読む順番を作っています。
コマンドは README のデモ用の内容で、このサイトや実在するパッケージのインストール手順ではありません。実際のリポジトリでは、現在のセットアップ手順と一致するか確認してからカードを作ります。
外側の Markdown フェンスの中身をコンバーターへコピーします。内側の Bash フェンスは README の一部です。コマンドをコードブロックとして表示するため、そのまま残してください。
# Atlas Notes
A small Markdown notebook for release teams.
## Quick start
```bash
npm install
npm run dev
```
- Local Markdown files
- Reviewed release notes
- Portable documentation
結果はコンパクトなプロジェクト紹介画像です。見出しの階層と、本文、コード、機能一覧の区別を確認します。画像のそばには README 全文へのテキストリンクを載せましょう。PNG では、文書と同じようにコマンドを選択したり、項目を移動したりできません。
この文字とコードの例では PNG を選びます。二行のコマンドを保ちつつ、掲載先で本文が小さくなりすぎない幅を探します。最も長い行から確認してください。幅を広げると折り返しは減らせても、狭いフィードでは画像全体が縮小されます。
README 全体にバッジ、複数のスクリーンショット、長いインストール手順がある場合は、用途別に画像を分けます。概要紹介とトラブル対応の資料では、必要な範囲も文字量も異なることが多いからです。
- コードフェンスの開始と終了がそろっているか確認します。閉じ忘れると、後ろの文章もコードに見える場合があります。
- ブラウザーの操作部分や、関係のないリポジトリ画面が混ざっていないか確認します。カードでは選んだ内容を伝えます。
- PNG をダウンロードし、予定の表示サイズで、特にコマンドと記号を確認します。
- プロジェクトと画像の内容を説明する代替テキストを書き、投稿には元の README へのリンクを添えます。
README が変わったら、修正後の原稿から画像を再生成し、文書と一致させましょう。公開 GitHub README を読み込み、確認して書き出すできます。