VS Code 拡張機能

 

VS Code 拡張機能はいくつかの機能を提供しており、スライドの整理や概要の把握を支援します。

機能

• サイドパネルでのプレビュー
• スライドのツリービュー
• スライドの順序変更
• スライドブロックの格納
• 複数のスライドプロジェクトのサポート
• ワンクリックで開発サーバーを起動

インストール

拡張機能は、VS Code Marketplace または Open VSX Registry からインストールできます。

使い方

アクティビティバーの Slidev アイコンをクリックして Slidev パネル を開きます。Slidev パネルでは、プロジェクトのツリービュー、スライドのツリービュー、プレビューの Webview を確認できます。

プロジェクトのツリービュー では、ワークスペース内のすべての Slidev プロジェクトを確認できます。アイテムをクリックすると対応するファイルが開き、アイテム上の アイコンをクリックするとアクティブなプロジェクトを切り替えられます。 アイコンは自動的にスキャンされなかったスライドプロジェクトを読み込むためのものです。

スライドのツリービュー では、アクティブなプロジェクト内のすべてのスライドを確認できます。アイテムをクリックするとエディタ内のスライドにカーソルが移動し、ドラッグアンドドロップでスライドの順序を変更できます。

プレビューの Webview では、 アイコンをクリックして開発サーバーを起動し、 アイコンをクリックしてブラウザでスライドを開けます。プレビューのナビゲーションとエディタのカーソルの同期/非同期を アイコンで切り替えられます。

いくつかの コマンド も利用できます。コマンドパレットで Slidev と入力して確認してください。

slidev.include 設定にグロブパターンを追加して、Slidev エントリとしてファイルを含めることができます。デフォルト値は ["**/*.md"] です。例えば:

{
  "slidev.include": ["**/presentation.md"]
}

開発コマンド

開発サーバーを起動するコマンドは、slidev.dev-command 設定でカスタマイズできます。デフォルト値は npm exec -c 'slidev ${args}' です。

設定されたコマンドにはプレースホルダーを含めることができます:

• ${args}: すべての CLI 引数。e.g.: slides.md --port 3000 --remote
• ${port}: ポート番号。e.g.: 3000

例:

• グローバルインストール: slidev ${args}
• PNPM ユーザーの場合は、pnpm slidev ${args} に設定できます。
• code-server ユーザーの場合は、pnpm slidev ${args} --base /proxy/${port}/ に設定できます。これにより、開発サーバーは http://localhost:8080/proxy/3000/ でアクセス可能になります。