VS Code のサイドバーから Zenn 記事を執筆・管理
ZennPad は、VS Code のサイドバーから Zenn の記事/本/画像をまるごと扱える拡張機能です。GitHub リポジトリを仮想ファイルシステムとして開き、記事のドラフト作成・公開切替・画像挿入・プレビュー・デプロイまでをサイドバー上で行えるようにします。
Table of Contents
- 🏃Getting Started
- ✍️記事・本・画像管理
- 🧑🤝🧑リポジトリと同期
- 🔍Search ビュー
- 🖼️画像の取り込み
- 🛰️プレビューとデプロイ
- 🎯Actions ビュー
- ⏯️ Appendix: Contributed Commands
- 📋 Appendix: Configuration Settings
- 開発
- ライセンス
-
マーケットプレイスから ZennPad をインストールします。
-
アクティビティバーのノートブックアイコンから
ZennPadタブを開き、ZennPad: Sign in to GitHubで認証します。
-
zennpad.githubOwner/zennpad.githubRepo（必要に応じてzennpad.workBranch）を設定するか、ZennPad: Choose GitHub Repositoryで対象リポジトリを選択します。
-
ZennPad: Refreshでリポジトリ構造（articles/drafts/books/images/files）を取得し、ツリーから編集を始めます。
-
画像を挿入する場合は Markdown に貼り付け/ドラッグ＆ドロップするか、
ZennPad: Insert Image from Fileを実行します。 (👉 画像の取り込み - ZennPad) -
プレビューしたい場合は
zennCLI をインストール済みであることを確認し、ZennPad: Previewを実行してください。
Important
本リポジトリは、Zenn が公式に提供している GitHub 連携機能を前提に動作します。
連携方法の詳細は、Zenn 公式ドキュメントを参照してください。
関連: 👉 アカウントにGitHubリポジトリを連携してZennのコンテンツを管理する
ZennPad では Articles/Drafts/Books/Images/Files を Repositories ビューでツリー表示します。コンテキストメニューからリネーム・複製・削除、Zenn/GitHub へのリンクコピーやブラウザーオープンが可能です。
-
新規作成:
ZennPad: New Articleは日付入り slug と frontmatter を自動生成します。Book/Chapter も同様にテンプレート付きで作成できます。
-
公開/非公開の切替:
ZennPad: Publish Article/Unpublish Articleで frontmatter のpublishedをトグルし、Open on Zennから公開 URL をブラウザーで開けます。
-
並び替え: ツールバーの切替で記事を日付/タイトル順に並べ替えられます。
-
リンク操作: 任意のノードから Zenn/GitHub URL、絶対/相対パスをコピーできます。
-
ドラフト管理: Drafts 配下のコンテンツもツリー上で同じ操作が可能です。
Tip
ドラフトはタイトルの横に鍵アイコンが表示されます
ZennPad は GitHub Contents API を使ってリポジトリを仮想ファイルシステムとして扱います。ローカルに clone することなく、ブランチと同期しながら編集できます。
flowchart LR
A[ローカルファイル<br/>（Markdown）]
B[GitHub Repository<br/>（Remote）]
C[Zenn]
A -->|auto sync| B
B -->|auto sync| C
- サインインと選択:
ZennPad: Sign in to GitHubで GitHub 認証し、ZennPad: Choose GitHub Repositoryで対象を選択。 - 自動同期:
zennpad.workBranch（デフォルトzenn-work）に自動で反映し、ステータスバーから一時停止/再開が可能。ZennPad: Flush Pending Syncで保留キューを即座にフラッシュできます。 - デプロイ:
Deploy to Zennコマンドで work ブランチから main ブランチへ反映し、Zenn 側に公開します。 - 設定パネル: Actions ビューの Settings から owner/repo/branch/zennAccount を GUI で変更できます。
関連: 👉 アカウントにGitHubリポジトリを連携してZennのコンテンツを管理する(https://zenn.dev/zenn/articles/connect-to-github)
Search ビューはファイル名/タイトル/本文を横断検索できる Webview です。ケース/単語/正規表現トグルを備え、結果から直接ファイルを開けます。
検索結果
Markdown への貼り付けやドラッグ＆ドロップを検知し、画像を /images/<timestamp>.<ext> に保存して  を自動挿入します。ZennPad: Insert Image from File でファイル選択からの挿入も可能です。
- 挿入方法:
- ショートカットキー:
Ctrl+V - コマンド:
ZennPad: Insert Image from File - コンテキストウィンドウ:
Insert Image from File
- ショートカットキー:
- パス操作: Zennの画像ファイル配置ルールに従い、画像が配置され、自動的に適したパスが入力されます。
ZennPad: Preview を実行すると、アクティブな Markdown を同期しつつ、プレビューを表示します。/images へのリクエストもローカルで解決されるため、ドラフト中でも正確な見た目を確認できます。
Tip
Zennからデプロイ状況を確認する (デプロイ履歴 - zenn.dev)
-
デプロイ中
-
デプロイ成功
関連: 👉 GitHubリポジトリ連携についてのFAQ(https://zenn.dev/zenn/articles/connect-to-github)
Actions ビューはクイックアクセスランチャーです。サインイン、設定パネル、Zenn プロフィール、ヘルプガイド（外部サイト or プレビュー deep link）への導線をまとめています。
ZennPad: Sign in to GitHub/Sign out of GitHub- GitHub 認証の開始と解除ZennPad: Choose GitHub Repository- 対象リポジトリを Quick Pick で選択ZennPad: Refresh- GitHub から最新の articles/books/images を取得ZennPad: New Article/New Book/New Chapter- テンプレート付きで新規作成ZennPad: Publish Article/Unpublish Article- frontmatter のpublishedをトグルZennPad: Preview- zenn CLI バックエンドで Webview プレビューを開くZennPad: Insert Image from File- ローカル画像を/imagesに保存し Markdown を挿入ZennPad: Deploy to Zenn- work ブランチから main ブランチへデプロイZennPad: Flush Pending Sync- 保留中の同期を強制フラッシュZennPad: Pause Auto Sync/Resume Auto Sync- 自動同期の一時停止/再開ZennPad: Copy Zenn URL/Copy GitHub URL- 選択中コンテンツのリンクをコピーZennPad: Sort Articles by Date/Sort Articles by Title- 記事ツリーの並び順を切替
zennpad.githubOwner- Zenn 用リポジトリの GitHub オーナー（ユーザーまたは org）zennpad.githubRepo- Zenn 用リポジトリ名zennpad.githubBranch- デプロイ先のメインブランチ（デフォルト:main）zennpad.workBranch- 編集内容を自動同期するワークブランチ（デフォルト:zenn-work）zennpad.zennAccount- Zenn アカウント（zenn.dev/{username}）。空の場合はgithubOwnerを使用
開発環境のセットアップやコントリビュート手順は CONTRIBUTING.md を参照してください。ビルド/テスト/フォーマット用の npm スクリプトは package.json にまとまっています。