はじめに
みなさん、Lightning Talk してますか？
LT は準備も Lightning であるべき！⚡️
Markdown でスライドをサクッと作成することができる Marp というツールを紹介します。
Marp を導入する
1. 拡張機能 Marp for VS Code をインストールする
2. vscode デフォルトの Markdown プレビューボタンを表示する
Marp for VS Code では vscode デフォルトの Markdown プレビュー機能を使います。
拡張機能 Markdown Preview Enhanced を入れていると、vscode デフォルトの Markdown プレビューボタンが非表示になっていることがあります。
setting.json に以下の設定を追加してあげると復活します。
setting.json
{
"markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons": false
}
3. *.md ファイルの先頭におまじないを書く 🪄
スライドの縦横比を指定したいときは size を指定してあげます。
「最近はスマホで発表を見てくれる人もいるから、『16 : 9』にするといいよ」と大学時代の指導教員に教わりました（余談）
slide.md
---
marp: true
size: 16:9
---
プレビューボタンをポチっと押すと、スライドになっていることが確認できます 👀
Marp の基本のキ ✍🏻
改ページしたい！
改ページしたい箇所に --- を挿入します。
（headingDivider を指定すると、見出しごとに自動で改ページすることもできる）
カスタムのスタイルを当てたい！
カスタムのスタイルは *.css で指定します。
custom-theme.css
/* @theme custom-theme */
@import 'default';
h1 {
color: red;
}
| コード | 意味 |
|---|---|
/* @theme custom-theme */ |
カスタムテーマの名前をつける |
@import 'default'; |
default のテーマを継承する |
*.md でカスタムテーマを指定します。
slide.md
---
marp: true
+ theme: custom-theme
size: 16:9
---
vscode にもカスタムテーマを教えてあげます 👨🏫
setting.json
{
"markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons": false,
+ "markdown.marp.themes": ["./custom-theme.css"]
}
赤くなった！！！！！
デカ文字を表示したい！
<!-- fit --> をつけると圧迫感を演出できます(?)
おわりに
充電ケーブルは Lighting じゃないほうが良い 🍎