https://github.com/zenn-dev/zenn-vscode-extension
ブラウザ上の VSCode で Zenn をプレビューするための拡張
https://github.com/zenn-dev/zenn-vscode-extension
markdown vscode-extension zenn
Last synced: 3 months ago
JSON representation
ブラウザ上の VSCode で Zenn をプレビューするための拡張
- Host: GitHub
- URL: https://github.com/zenn-dev/zenn-vscode-extension
- Owner: zenn-dev
- License: mit
- Created: 2022-11-07T08:30:16.000Z (over 3 years ago)
- Default Branch: canary
- Last Pushed: 2026-02-13T07:23:50.000Z (4 months ago)
- Last Synced: 2026-02-13T13:49:02.164Z (4 months ago)
- Topics: markdown, vscode-extension, zenn
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=zenn.zenn-preview
- Size: 1.47 MB
- Stars: 65
- Watchers: 3
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> **🚩 この拡張機能はまだ β 版です**
> **🚩 現在はブラウザ上で動くことを想定してます。ローカルの VSCode でも一応動作しますが保証はしません**
# Zenn VSCode Extension
ブラウザ上で実行される VSCode で、Zenn のコンテンツを表示するための拡張機能です。
## 特徴
- Zenn のコンテンツをサイドバーに一覧表示します
- [Zenn のフォーマット](https://zenn.dev/zenn/articles/markdown-guide)で書かれたコンテンツをプレビューします
- 記事や本のテンプレートを VSCode 上で新規作成できます
- Zenn 独自の記法のスニペットを追加します
- Zenn のガイド記事一覧を表示します
## 使い方
Zenn のコンテンツ(`articles/**.md`, `books/**`)があるワークスペースで VSCode を開くと、アクティビティーバーに Zenn のロゴが追加されます。
追加された Zenn のロゴをクリックすると、ワークスペース内の Zenn のコンテンツがツリービューに表示されます。
### コンテンツのプレビュー
記事や本のプレビューは、リスト内のプレビューボタンから行うことができます。
現在開いているマークダウンファイルが Zenn のリポジトリ内の `articles` フォルダまたは `books` フォルダに存在している場合には、コマンドパレットから `Zenn: Preview Contents` を実行するか、エディタタイトル上のプレビューボタンをクリックすることでもプレビューができます。
### チャプター番号による並べ替え
BOOKS セクションのチャプターファイルは `config.yaml` や `n.slug.md` のフォーマットで設定したチャプターの順番で並べ替えることができます。並べ替えの設定を有効化するには「設定 → Zenn Preview → Sort By Chapter Number」から設定項目をチェックして下さい。
更に「Show Chapter Number」 の設定を有効化することでチャプターファイルの表示にチャプター番号をプリフィクスすることが可能です。
デフォルトではこれらの設定は無効化されており、ツリービューにおいてチャプターはファイル名の順番で表示されます。また、チャプタータイトルがある場合にはそのタイトルから表示され、チャプタータイトルが無い場合にはファイル名から表示されます。
### プレビュータイトルの切り詰め表示
プレビューパネルのタブタイトルはフロントマター（Front Matter）の `emoji` キーに指定した絵文字と `title` キーに指定した文字列を使って「😺 タイトル文字列 のプレビュー」のフォーマットで表示します。ただし、`title` キーに指定したタイトル文字列が長すぎる場合にはタブタイトルの絵文字を含めずに 50 文字に切り詰め、残りの部分は「...」のフォーマットで省略して表示します。
切り詰め用の文字数は「設定 → Zenn Preview → Truncate Preview Title」から変更することができ、この設定で指定した文字数によって以下のように各プレビューパネルのタイトルを一律に切り詰めて表示できます。
設定可能な切り詰め用の文字数は最小で 5 文字です。切り詰め表示を行いたくない場合には 999 などの大きな数値を指定してください。
### コンテンツの新規作成
ツリービュー内の各セッションにある新規作成ボタンをクリックするか、コマンドパレットからのコマンド実行で各種コンテンツのテンプレートを作成できます。
#### 記事の場合
コマンドパレットから `Zenn: New Article` コマンドを実行するか、ツリービュー内 ARTICLES セクションタイトル上の新規作成ボタンをクリックすることで記事のテンプレートが作成されます。
#### 本の場合
コマンドパレットから `Zenn: New Book` コマンドを実行するか、ツリービュー内 BOOKS セクションタイトル上に配置された新規作成ボタンをクリックすることで本のテンプレートが作成されます。
#### チャプターの場合
本の作成後にはチャプターを単体で作成できるようになります。コマンドパレットから `Zenn: New Book Chapter` コマンドを実行するか、ツリービュー内 BOOKS セクションの本タイトル上に配置された新規作成ボタンをクリックすることでチャプターが作成されます。
### ガイド記事の一覧表示
Zenn のガイド記事一覧を表示できます。
ツリービュー GUIDES セクションに表示されたガイド記事の一覧からボタンをクリックするか、コマンドパレットから `Zenn: Open Guide` コマンドを実行することで [zenn.dev](https://zenn.dev/zenn) 上のガイド記事にアクセスできます。
## スニペットを有効にする方法
デフォルトでは Markdown のスニペットは無効化されているため、有効にするには設定を変更する必要があります。
settings.json に以下の設定を追加してください。
```json
"[markdown]": {
"editor.quickSuggestions": {
"comments": true,
"strings": true,
"other": true
}
}
```
## Zenn との連携について
以下の記事を参照してください。
- [GitHub リポジトリで Zenn のコンテンツを管理する](https://zenn.dev/zenn/articles/connect-to-github)
- [Zenn のコンテンツを github.dev で編集する](https://zenn.dev/zenn/articles/usage-github-dev)
# License
[MIT](LICENSE)