https://marp.app/
https://github.com/marp-team/marp-vscode
Marp はMarkdown でスライドショーを作成できるツールです。
Marp for VS Code を使ってみました。
Visual Studio Code 上でMarp を使えるようになったんですね。

2020-06-05 追記

Visual Studio Code 上でいろいろ書けるようになりました。

  • スライド本体(Markdown 形式)
    Marp for VS Codeで記述
  • 図形(Draw.io SVG形式)
    Draw.io VS Code Integration で描画してSVG 形式で出力
  • グラフ(Vega SVG形式)
    Vega Viewer でJSON データをSVG 形式で出力

2020-07-08 追記

  • 目次
  • 無理やり感のある段組み
  • 地図
  • テーマカスタマイズ
  • ページ番号非表示

環境

  • Windows 10 Insider Preview 19631
    • Visual Studio Code 1.45.1
      • Marp for VS Code 0.13.0

構築

  1. Visual Studio Code で「表示」-「拡張機能」メニューを選択し、Marpを検索
  2. 「Marp for VS Code」をインストールして再読み込みを実行

Marp の書き方

利用

スライドの作成

  • Markdown ファイルで記載
    marp-sample.md
    ---
    marp: true
    ---

    # Your slide deck

    Start writing!

プレビュー

  • ツールバーの「プレビューを横に表示」ボタン(Ctrl + K V)
    marp_for_vscode_preview
  • プレビューを表示(Ctrl + Shift + V)

エクスポート

  1. ツールバーのMarp アイコンをクリックしてExport Slide Deckを選択
  2. ファイル名とファイルの種類を指定してExportを実行
    • HTML
    • PDF
    • PPTX (PowerPoint document)
    • PNG (First slide only)
    • JPEG (First slide only)
  3. ビューアで表示

サンプル

コメント

2020-05-27