reveal.js とは
Markdown に対応した、プレゼン資料を手軽に作成できるツール
VSCode の拡張機能「vscode-reveal」を利用すれば手軽に動作を試せます。
ライトニングトークや上司に軽いプレゼンをしたい時にオススメ
どんなことが出来るのか
reveal.js 公式デモ
こんな感じの資料が Markdown で作れます
環境設定
拡張機能のインストール
※Visual Studio Code の基本的な操作方法は省略します。
- Visual Studio Code を起動する。
- 拡張機能で [reveal] を検索する。
- [vscode-reveal] が検索結果に表示されたら [インストール] ボタンをクリックする。
- [インストール] ボタンの表示が [再読込] に変わったら [再読込] ボタンをクリックする。
- Visual Studio Code が再起動したら環境設定は終了。
動かしてみる
- ↓のテキストを Visual Studio Code に Markdown 形式で貼り付け
---
theme : "white"
transition : "default"
---
# reveal.js 試してみた
Markdown で書いてみた
---
## 縦スクロール
キーボードの ↓ を押す(vim の hjkl も使える
--
## これは
- reveal.jsを利用した
- デモになります。
---
## 終わり
ありがとうございました。
[reveal.js] をインストールしたので [エクスプローラー] にスライド一覧が表示されるようになっている
クリックすると Markdown を記載してる場所にジャンプする
- コマンドパレットで [reveal] を検索する。
- [Open presentation in browser] をクリックする。
※他のコマンドで PDF出力、HTML出力、Visual Studio Code 上でのプレビューも可能 - ブラウザが起動して作成した資料がプレビューされる。
テーマ色を変えてみる
この部分を
theme : "white"
"black" に変えるだけで黒背景に対応
詳細な使い方や設定
公式のREADME を読むと他にも色んな表現が出来るようになります。
VSCode が動く環境であれば、どこでも使えるという点も便利です。
参考リンク
vscode-reveal - Visual Studio Marketplace
reveal.js - GitHub
reveal.js 公式デモ