【VSCode】Markdownで本格プレゼンテーションを作ろう!

ツール

事前準備

Markdown Preview Enhancedという拡張機能を用います。

基本的な使い方はこちらの記事を参考にしてください。

【Visual Studio Code】Markdownの導入と基本的な使用方法
Visual Studio CodeでMarkdownを使うためにMarkdown Preview Enhancedという拡張機能を追加します。ここではMarkdown Preview Enhancedの基本的な使い方について説明していきます。

サンプル

  • スライドサンプル
sample
  • コード
b1san/markdown-slide-sample
Contribute to b1san/markdown-slide-sample development by creating an account on GitHub.

プレゼンテーションの作成方法

Markdown Preview Enhancedには、プレゼンテーションを作るための仕組みとしてreveal.jsがサポートされています。

Markdown Preview Enhancedの構文をそのまま利用し、簡単にプレゼンテーションを作ることができます。

プロパティ設定

プレゼンテーションを作るためには、最初にプレゼンテーションのプロパティを設定します。例えば、横800px、縦600pxのスライドに設定するには、次のようにします。

---
presentation:
  width: 800
  height: 600
---

width、heightの他にも様々なプロパティが用意されています。ここでは一部抜粋して紹介します。

プロパティ説明
controlstrue/falseスライド移動用の矢印の表示有無を設定します。
controlsLayoutbottom-right/edgesスライド移動用の4方向の矢印を右下に表示する(bottom-right)か、各方向の端に表示するか(edges)を設定します。
slideNumbertrue/falseスライドページ番号の表示有無を設定します。
historytrue/falseブラウザの履歴を有効にするかを設定します。
keyboardtrue/falseキー操作の有無を設定します。
showNotestrue/false全スライドにノートを表示するかを設定します。
autoSlide数値(デフォルト:0)スライドを自動で移動する際の時間(1000: 1s)を設定します。0の場合は自動移動しません。
autoSlideStoppabletrue/falseスライドを自動で移動させる場合に、停止ボタンの表示有無を設定します。
mouseWheeltrue/falseマウスホイール操作の有無を設定します。
transitionSpeeddefault/fast/slowスライドの移動速度を設定します。
backgroundTransitionnone/fade/slide/convex/concave/zoomスライド移動アニメーションを設定します。
enableSpeakerNotestrue/falseスピーカーノート機能の有無を設定します。

スライドの作成

スライドを作成するには、次のように<!– slide –> を追加します。

<!-- slide -->
## 1ページ目

これは1ページ目のスライドです。

<!-- slide -->
## 2ページ目

これは2ページ目のスライドです。

<!-- slide -->
## 3ページ目

これは3ページ目のスライドです。

<!– slide –>より下の内容がページの内容となります。ページを増やす場合はさらに<!– slide –>を追加します。

スライドの内容はMarkdownの基本的な構文で作成します。

スライド背景の設定

スライドに背景色を設定する場合は、data-background-color属性を設定します。また画像を設定する場合は、data-background-image属性を設定します。

<!-- slide data-background-color="#ff0000" -->
このスライドの背景色は赤色です。

<!-- slide data-background-image="url" -->
このスライドの背景は画像です。

スライド移動アニメーションの設定

スライド移動時のアニメーションを設定するには、data-transition属性を設定します。またページ移動速度をdata-transition-speed属性で設定できます。

<!-- slide data-transition="slide" -->
横移動

<!-- slide data-transition="fade" data-transition-speed="slow" -->
ゆっくり消える

スライドの縦移動

vertical属性を設定することで、スライドを立てに移動させることができます。

<!-- slide vertical=true -->
このスライドは縦に移動します。

要素アニメーションの設定

次のようにすることで、スライド内の要素にアニメーションを設定することができます。

- Item 1 <!-- .element: class="fragment shrink" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->

アニメーションは次の種類があり、class属性に設定します。

アニメーション説明
grow文字を拡大します。
shrink文字を縮小します。
fade-out文字をゆっくり消します。
fade-up文字をゆっくり上がるように表示します。
fade-in-then-out文字をゆっくり表示し、次の操作で消します。
fade-in-then-semi-out文字をゆっくり表示し、次の操作で文字の色を薄くします。
highlight-current-blue文字を青色にし、次の操作で元の色に戻します。
highlight-red文字を赤色にします。

またdata-fragment-index属性によってアニメーション順序を設定します。

スピーカーノート

プレゼンテーションプロパティのenableSpeakerNotesをtrueに設定することで、Sキーを押すとスピーカーノートが起動できるようになります。

これによりプレゼンテーションの最中にノートの確認ができます。

スライドにノートを設定するには、data-notes属性を設定します。

<!-- slide data-notes="ここにノートを書きます" -->

スタイルの設定

コマンドパレット(F1キー)を開いて、「Markdown Preview Enhanced:Customize CSS」を実行します。実行するとstyle.lessファイルが開くので、そこでスタイルを設定します。

.markdown-preview.markdown-preview {
  .slides {
    //ここにスタイルを追加する
  }
}

 

- Visual Studio Codeのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました