Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Marp for VS Code 拡張機能開発の舞台裏 - VS Code Conferenc...

Marp for VS Code 拡張機能開発の舞台裏 - VS Code Conference Japan 2024

Yuki Hattori

April 20, 2024
Tweet

More Decks by Yuki Hattori

Other Decks in Programming

Transcript

  1. #vscodejp Marp とは? <!-- theme: uncover --> # タイトル 作者名

    --- ## 見出し - xxxxxxxxxxxx - xxxxxx --- ## 画像 xxxxxxx、xxxxxxx ![bg right](https://marp.app/assets/hero-background.svg) 6 6
  2. #vscodejp 2018: 新生 Marp (Marp Next) 複数のパーツから構成されるエコシステム なぜ VS Code

    なのか? ツール (コマンドラインツール / GUI ツール ) コア (Marp Core) フレームワーク (Marpit framework) 12 12
  3. #vscodejp Marp for VS Code の機能 Marp プレビュー エクスポート機能 Markdown

    言語機能の拡張 拡張機能の機能・設計 18 18
  4. #vscodejp > 拡張機能の機能・設計 Marp プレビュー --- marp: false theme: gaia

    _class: lead --- # Marp プレビュー Markdown プレビュー表示方法を切り替え --- ![bg 90%](https://marp.app/assets/og-image.png) 20 20
  5. #vscodejp > 拡張機能の機能・設計 Marp プレビュー --- marp: true theme: gaia

    _class: lead --- # Marp プレビュー Markdown プレビュー表示方法を切り替え --- ![bg 90%](https://marp.app/assets/og-image.png) 21 21
  6. #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
  7. #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
  8. #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
  9. #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
  10. #vscodejp 2018: + Visual Studio Live Share Marp Markdown を共同で編集

    開発のポイント https://visualstudio.microsoft.com/ja/services/live-share/ 35 35
  11. #vscodejp 2021: + github.dev / vscode.dev Web Extension に対応、ブラウザ上で Marp

    の編集 /プレビューが可能に 開発のポイント https://code.visualstudio.com/api/extension-guides/web-extensions 38 38
  12. #vscodejp 2022: + Markdown Language Server / Service 強化が進む Markdown

    言語機能の恩恵を受けられる 開発のポイント https://code.visualstudio.com/blogs/2022/08/16/markdown-language-server 39 39