これ何？
- VSCode で Markdown ベースでスライドを作るための備忘録です
- PowerPoint で作成するまでもない社内資料とかで Markdown 使って楽にシンプルにスライド作りたいという動機で導入しています
前提
- VSCode がインストール済みであること
- OSは Windows 10 Enterprise
参考にさせてもらったサイト
Markdownから簡単にスライドを作成する「Marp(Marpit)」 | tracpath:Works
軽量マークアップ言語として人気のマークダウンですが、このMarkdownからプレゼンテーションのスライドを作ることができるツールが「Marp」です。今回は、そのインストール手順と簡単な使い方を学んでいきましょう。
tracpath.com
環境作成
VSCode に Marp をインストールする
VSCode の Extension から Marp for VS Code を検索し、インストールします。
Markdown Preview Enhanced のプレビューと共存するための設定
デフォルトのままでは、MarkdownPreviewEnhanced とプレビューが競合？するため、Marpがプレビューできないっぽいです。
結構ハマりましたが、以下情報で解決しました。
Marp と Markdown Preview Enhanced の共存で詰まった話 - Qiita
内容Marp for VSCodeを使ってmarkdownをスライド形式でプレビューするにはVSCodeの標準プレビュー機能を使う必要があります。でも Markdown Preview Enh…
qiita.com
setting.json に以下を追記します。
{
"markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons": false,
}補足
GUIで設定を変更する方法を備忘録しておきます。いつも忘れるので。
- 以下のようにして設定画面を開きます。
- 検索窓が出ますので、そこに JSON のキーである
markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtonsを打ち込みます。
今回はチェックボックスを外すことで設定完了です。
- VSCodeを再起動します。
これでプレビューできるようになりました。
MarkdownPreviewEnhanced をインストールしていると、以下の通り２つのプレビューボタンが表示されますが、たぶん右側のほうがMarpのプレビューに対応しているものになります。
Marp で HTML タグが使えるようにする
必須じゃないと思われますが、HTMLタグ使えたほうが便利なので設定します。
スライド作成方法
スライドと認識するようにする方法
markdown の先頭行に以下の呪文を入れます。
---
marp: true
---これでプレビューするとスライドになってます。
改ページ
２通りあるみたいですが、デフォルトでは --- で改ページ となります。
## といった章立てで改ページするようにするためには、以下のように呪文を入れます。
---
marp: true
---
<!--
headingDivider: 2
-->これで ## で改ページできるようになります。
その他、テーマ変更や背景画像、フッターなど設定できるそうですがここでは割愛します。
参考サイト様のところに載っているので、そちらを参考します。
Markdownから簡単にスライドを作成する「Marp(Marpit)」 | tracpath:Works
軽量マークアップ言語として人気のマークダウンですが、このMarkdownからプレゼンテーションのスライドを作ることができるツールが「Marp」です。今回は、そのインストール手順と簡単な使い方を学んでいきましょう。
tracpath.com
スライドへのエクスポート
エクスポートは、pdfやhtml、パワーポイント形式など多岐にわたるみたいです。
ここでは html 形式の出力とします。
ここで出力形式を選択します。
できあがった HTMLファイルをブラウザで表示すると、スライドになっています。
すばらしい！
コメント