JekyllでMarpスライド表示レイアウトを作ったよ
なにこれ？
Jekyll（GitHub Pages）でMarpっぽいスライド表示ができるレイアウトを作ってみた。
今見てるこれがそう。
作った機能
- スライドページング: 前後ナビゲーション
- 全画面表示: プレゼン用の全画面モード
- URL対応:
#slide-3で特定スライドにリンク
- スマホ対応: タップ操作＋レスポンシブ表示
- キーボード操作: 矢印キー、スペース、F/ESCキー
操作方法
PC
- 矢印キー・スペース: スライド移動
- Fキー: 全画面切り替え
- ESCキー: 全画面終了
- スライドクリック: 左半分で戻る、右半分で次へ
スマホ
- タップ: 左半分で戻る、右半分で次へ
- ボタン: prev/nextボタン
- 全画面: ⛶ボタン
使い方
Markdownの先頭にlayout: marpを追加するだけ！
---
layout: marp
---
# スライドタイトル
---
## スライド2
あとは---でスライドを区切って、普通のMarkdownを書くだけ。
実装について
_layouts/marp.htmlにレイアウトファイルを作成。
JavaScriptで：
- JekyllのHTML出力をMarkdown風テキストに逆変換
---でスライド分割- 各スライドを再度HTMLに変換して表示
技術的な工夫
- 完全なスタイル隔離:
all: initialでブログテーマと分離
- HTML→Markdown変換: Jekyllの出力を再パース
- 透明感のあるUI: rgba()でモダンなデザイン
- 16:9アスペクト比: Marpらしいスライドサイズ
なんで作ったの？
Marpでスライド作成に挑戦してみた。
MarpのMarkdownをそのままに、ブログに掲載したかった。
どうせならブログでもスライド表示したくなった。
まとめ
- Jekyll + Marp風レイアウトで簡単スライド表示
- URL共有で特定スライドを直接シェア可能
- 全画面モードでプレゼンテーションも対応
- スマホ対応でどこでも見やすい
Jekyll使ってる人は参考にしてみてください！
