home/開発日記/

Frontmatter を使用したスライド表示

プレゼンテーション、スライド周りの変更点まとめ

Frontmatter 対応

GROWI が YAML 形式の Frontmatter を認識するようになった。

  • Frontmatter はメタデータをページに埋め込む目的でよく使う。
  • 1 行目と n 行目に --- を挿入することで、それらで囲まれたものは Frontmatter としてみなされる。(YAML 形式)
  • 2 行目から n-1 行目には key: value という形で設定を記入できる。
  • Frontmatter としてみなされたものは表示されない
  • Frontmatter 参考: https://qiita.com/koppe/items/96a51890e6630959ffb6 external_link

具体的には、ページの冒頭に次のように記述する。

---
marp: false
header: This is header
footer: This is footer
---
# GROWI のスライドを作成する
- hogehoge
- fugafuga
- piyopiyo

...

すると出力は単純に

----ここから--------------------------------------------------------------------------------------

GROWI のスライドを作成する

  • hogehoge
  • fugafuga
  • piyopiyo

----ここまで--------------------------------------------------------------------------------------

となる。見た目上は Frontmatter は編集画面右のプレビューや通常のビュー画面には表示されない。

スライド表示について

この Frontmatter を使用して、編集画面右のプレビューや通常のビューにスライドを表示することができる。

GROWI スライド

GROWI が持つ本来のプレゼンテーションモードが生成するスライドを表示することができる。

方法は Frontmatter を次のようにすること

---
slide: true
---

すると、以降の文章を使用し、プレゼンテーションモードが生成するスライドをプレビューやビューで確認できる。

Marp スライド

プレゼンテーションのスライドを Markdown で書けるようにするライブラリ。使用する Markdown のレンダリングエンジンが異なるため、デフォルトでは無効化されている。

方法は Frontmatter を次のようにすること

---
marp: true
---

すると、Marp の記法にのっとり、Marp でレンダリングされたスライドをプレビューやビューで確認できる。

GROWI スライドと Marp スライドの比較

  • GROWI スライド
    • スライドは h1 と h2 ごとに分けられるため、今ある資料をそのままスライドにできる。
    • GROWI 独自の記法 lsx 等やその他 Math や Mermaid が基本問題なく表示される。
  • Marp スライド
    • Marp 記法を使うことができる。Marp の表現記法等がすべて使用できる。

プレゼンテーションモードについて

プレゼンテーションモードについては特に変更はないが、Frontmatter に

---
marp: true
---

と書いているときは、Marp のスライドでプレゼンテーションができるようになる。