目次

• Marp とは？
• なぜ VS Code なのか？
• 拡張機能の機能・設計
• 開発のポイント

2015: 初代 Marp

2015: 初代 Marp

オールインワンアプリの限界

• ユーザーの要望が多種多様
• 「エディターとしての機能性」も求められるように
• 「Markdownでスライドを書く」という命題にフォーカスできなくなりそう

Marp CLI (コマンドラインツール)

GUI ツールに求められるもの

• 初代 Marp と同等の体験
  • スライドプレビュー＆エクスポート
• エディターの機能性・拡張性
  • ユーザー好みのエディター環境にできる
• 開発・保守の容易さ
  • GUI はコアのフロントエンドに徹したい

Markdown Extension

設計

marp: true を検出したら、処理を Marp の markdown-it エンジンに移譲

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) // そうでないなら、元々のパース処理を実行
    }
  }
}

設計

拡張機能に埋め込まれた 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 [保存先のパス]` を呼出　
}

ディレクティブの補完

• スライドの設定を行う Marp 記法
• Ctrl+Space で補完

コードハイライト＆ホバーヘルプ

• 認識されたディレクティブを強調表示
• ホバーで簡単なヘルプと、ドキュメントへのリンクを表示

リンター

• 非推奨のディレクティブや、エラーを検知してハイライト
• 一部は から自動修正可能

Markdown アウトライン拡張

• アウトラインサイドバーでスライドページを認識
• スライドページ単位のコード折りたたみ

設計

• Programmatic Language Features
  • Markdown 向けの Language Server は当時まだ無かった
  • VS Code API で愚直に拡張

// 例: 補完機能の提供
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] // 実際には、ドキュメントやカーソル位置で、補完候補をフィルタリングする必要がある
  },
})

2018: + Visual Studio Live Share

Marp Markdown を共同で編集

2019: + Remote Development

コンテナーや WSL 上での編集・エクスポートに対応

2021: + Workspace Trust

強化されたセキュリティモデルをフォロー

2021: + github.dev / vscode.dev

Web Extension に対応、ブラウザ上で Marp の編集/プレビューが可能に

2022: + Markdown Language Server / Service

強化が進む Markdown 言語機能の恩恵を受けられる

2022: + GitHub Copilot

スライドの執筆を AI で支援