#vscodejp Marp for VS Code 拡張機能開発の舞台裏 Yuki Hattori 2024-04-20 — VS Code Conference Japan 2024

#vscodejp Yuki Hattori (服部 雄輝 ) フロントエンドエンジニア Marp メンテナー  | 株式会社 YAGO  | @y_hatt  | @yhatt 2 2

#vscodejp 目次 Marp とは？ なぜ VS Code なのか？ 拡張機能の機能・設計 開発のポイント 3 3

#vscodejp とは？ 4 4

#vscodejp Markdown で プレゼンスライドを書く エコシステム Marp とは？ 5 5

#vscodejp Marp とは？ # タイトル 作者名 --- ## 見出し - xxxxxxxxxxxx - xxxxxx --- ## 画像 xxxxxxx、xxxxxxx  6 6

#vscodejp Marp for VS Code ＝ Marp を VS Code で使うための拡張 7 7

#vscodejp なぜ VS Code なのか？ 8 8

#vscodejp エディターとしての 高い機能性・拡張性 なぜ VS Code なのか？ 9 9

#vscodejp 2015: 初代 Marp なぜ VS Code なのか？ 10 10

#vscodejp 2015: 初代 Marp オールインワンアプリの限界 ユーザーの要望が多種多様 「エディターとしての機能性」も求められるように 「 Markdownでスライドを書く」という命題にフォーカスできなくなりそう 要素を分解し、モジュラーなエコシステムとしての方向性を模索 なぜ VS Code なのか？ 11 11

#vscodejp 2018: 新生 Marp (Marp Next) 複数のパーツから構成されるエコシステム なぜ VS Code なのか？ ツール (コマンドラインツール / GUI ツール ) コア (Marp Core) フレームワーク (Marpit framework) 12 12

#vscodejp Marp CLI (コマンドラインツール ) なぜ VS Code なのか？ 13 13

#vscodejp GUI ツールに求められるもの 初代 Marp と同等の体験 スライドプレビュー＆エクスポート エディターの機能性・拡張性 ユーザー好みのエディター環境にできる 開発・保守の容易さ GUI はコアのフロントエンドに徹したい なぜ VS Code なのか？ 14 14

#vscodejp 15 15

#vscodejp https://github.com/yhatt/marp/issues/118 16 16

#vscodejp 拡張機能の機能・設計 17 17

#vscodejp Marp for VS Code の機能 Marp プレビュー エクスポート機能 Markdown 言語機能の拡張 拡張機能の機能・設計 18 18

#vscodejp 拡張機能の機能・設計 Marp プレビュー 19 19

#vscodejp > 拡張機能の機能・設計 Marp プレビュー --- marp: false theme: gaia _class: lead --- # Marp プレビュー Markdown プレビュー表示方法を切り替え ---  20 20

#vscodejp > 拡張機能の機能・設計 Marp プレビュー --- marp: true theme: gaia _class: lead --- # Marp プレビュー Markdown プレビュー表示方法を切り替え ---  21 21

#vscodejp Markdown Extension > 拡張機能の機能・設計 Marp プレビュー https://code.visualstudio.com/api/extension-guides/markdown-extension 22 22

#vscodejp > 拡張機能の機能・設計 Marp プレビュー "contributes": { "markdown.markdownItPlugins": true } import type { ExtensionContext } from 'vscode' export function activate(context: ExtensionContext) { return { extendMarkdownIt(md: any) { return md.use(require('markdown-it-plugin')) }, } } https://code.visualstudio.com/api/extension-guides/markdown-extension 23 23

#vscodejp 設計 を検出したら、処理を Marp の markdown-it エンジンに移譲 > 拡張機能の機能・設計 Marp プレビュー marp: true extendMarkdownIt(md: any) { const { parse: originalParse } = md md.parse = (markdown: string, env: any) => { if (detectMarpFromMarkdown(markdown)) { // marp: true を検出したら… md.marp = new Marp() return md.marp.markdown.parse(markdown, env) // Marp の markdown-it エンジンに移譲　 } else { md.marp = false return originalParse.call(md, markdown, env) // そうでないなら、元々のパース処理を実行 } } } 24 24

#vscodejp 拡張機能の機能・設計 エクスポート機能 25 25

#vscodejp 設計 拡張機能に埋め込まれた Marp CLI を使用 > 拡張機能の機能・設計 エクスポート機能 import { marpCli } from '@marp-team/marp-cli' async exportCommand(doc: TextDocument, outputUri: Uri) { const input = await createWorkFile(doc) const output = uri.fsPath // 保存先のパス await marpCli([input, '-o', output]) // `marp input.md -o [保存先のパス]` を呼出　 } https://github.com/marp-team/marp-cli#api-experimental 26 26

#vscodejp ディレクティブの補完 コードハイライト＆ホバーヘルプ リンター Markdown アウトライン拡張 拡張機能の機能・設計 Markdown 言語機能の拡張 27 27

#vscodejp ディレクティブの補完 スライドの設定を行う Marp 記法 で補完 > 拡張機能の機能・設計 Markdown 言語機能の拡張 Ctrl+Space 28 28

#vscodejp コードハイライト＆ホバーヘルプ 認識されたディレクティブを強調表示 ホバーで簡単なヘルプと、ドキュメントへのリンクを表示 > 拡張機能の機能・設計 Markdown 言語機能の拡張 29 29

#vscodejp リンター 非推奨のディレクティブや、エラーを検知してハイライト 一部は から自動修正可能 > 拡張機能の機能・設計 Markdown 言語機能の拡張 30 30

#vscodejp Markdown アウトライン拡張 アウトラインサイドバーでスライドページを認識 スライドページ単位のコード折りたたみ > 拡張機能の機能・設計 Markdown 言語機能の拡張 31 31

#vscodejp 設計 Programmatic Language Features Markdown 向けの Language Server は当時まだ無かった VS Code API で愚直に拡張 > 拡張機能の機能・設計 Markdown 言語機能の拡張 // 例: 補完機能の提供 vscode.languages.registerCompletionItemProvider('markdown', { async provideCompletionItems(doc, pos) { const themeCompletionItem = new vscode.CompletionItem('theme') themeCompletionItem.documentation = 'Set the theme name of slide deck' return [themeCompletionItem] // 実際には、ドキュメントやカーソル位置で、補完候補をフィルタリングする必要がある }, }) https://code.visualstudio.com/api/language-extensions/programmatic-language-features 32 32

#vscodejp 開発のポイント 33 33

#vscodejp 小さな拡張で VS Code の進化に寄り沿う 開発のポイント 34 34

#vscodejp 2018: + Visual Studio Live Share Marp Markdown を共同で編集 開発のポイント https://visualstudio.microsoft.com/ja/services/live-share/ 35 35

#vscodejp 2019: + Remote Development コンテナーや WSL 上での編集・エクスポートに対応 開発のポイント https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack 36 36

#vscodejp 2021: + Workspace Trust 強化されたセキュリティモデルをフォロー 開発のポイント https://code.visualstudio.com/blogs/2021/07/06/workspace-trust 37 37

#vscodejp 2021: + github.dev / vscode.dev Web Extension に対応、ブラウザ上で Marp の編集 /プレビューが可能に 開発のポイント https://code.visualstudio.com/api/extension-guides/web-extensions 38 38

#vscodejp 2022: + Markdown Language Server / Service 強化が進む Markdown 言語機能の恩恵を受けられる 開発のポイント https://code.visualstudio.com/blogs/2022/08/16/markdown-language-server 39 39

#vscodejp 2022: + GitHub Copilot スライドの執筆を AI で支援 開発のポイント 40 40

#vscodejp Marp for VS Code + ??? = 41 41

#vscodejp 小さな拡張で VS Code のエコシステムを活かし、価値を最大化 Marp for VS Code + ??? = 41 41

#vscodejp  Marp for VS Code https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode 42 42