—
marp: true # これはmarpのスライドです
theme: “gaia” # 公式配布のテーマを使用します
header: “Marpでスライド作成を試す” # ヘッダーに表示される文を指定できます
footer: “自由研究” # フッターに表示される文を指定できます
backgroundColor: white
headingDivider: 2 # 改ページの基準とする見出しレベル（”—“でどこでも改ページできます）
paginate: true # ページ番号を下部に表示する
size: 16:9 # スライドの縦横比の指定
math: katex # LaTexで数式を記述しています
—
# marpでスライドを作って表示してみる
前回はMarpを使うための環境を構築しました。今回は実際にスライドを作ってみたいと思います。
## フォルダーツリーを作成する
先人の知恵に倣い、ひとまず以下のようなフォルダーツリーの構成を採用することとします。
“` text
📂 Marp用ルートフォルダー（任意のフォルダー）
┝📂.git（隠しフォルダー）
│ ・git clone / git init 実行時に自動生成されます
┝📂.github
│ ・GitHub Actions を使用してスライド生成を行うために作成するそうです（未使用）
┝📂.vscode
│ ・VSCode の設定ファイル保持用
│ ・ここに設定を保存するとこのMarp用フォルダーのみに適用されるため環境分離が出来ます
┝📂scripts
│ ・各種シェルスクリプトを保持します
┝📂styles
│ ・スライドのデザインファイルを保持します
┝📂src
│ ├📂[一つ目のスライド名]
│ │ ├ index.md
│ │ └ ・・・
│ │ ・（srcディレクトリ下にサブフォルダーを作成して複数のスライドを作成・管理します）
│ └📂[二つ目のスライド名]
│ ├ index.md
│ └ ・・・
├📒.gitignore（gitで管理しないファイルを指定しておくやつ）
├📒README.md（GitHubリポジトリのトップページに表示されるやつ）
├📒package.json（Nodejsのパッケージ情報・スクリプトを保持するやつ）
└📒Makefile（面倒な各種処理を便利に実行するために書いておくやつ）
“`
## スライドのソースファイルを用意する
上記のフォルダー構成で `src` フォルダー内にサブフォルダーを作って、その中に `index.md` という名前のテキストファイルを作成してください。
フォルダーの数だけ、別々のプレゼン用スライドを作成できます。
後ほど実行しますが、Marpを起動してブラウザで開くと、フォルダー名で今から表示させるスライドを開くリンク集が表示されます。
## スライドを作成していく
では、スライドを作成していきます。スライドのフォルダー前を `blogslide` とすることにしようと思いますので、`src\blogslide` フォルダーに、`index.md` ファイルを作成します。その `index.md` ファイルを編集していきます。
“` text
📂 Marp用ルートフォルダー（任意のフォルダー）
└📂src
└📂blogslide
└📝index.md
“`
## 冒頭にMarpの設定を記述する
前回の投稿の最後の方にサラッと書きましたが、コメントで説明を加えた状態で再掲します。
“` text
—
marp: true # 「これはmarpのスライドです」という宣言
theme: “gaia” # 公式配布のテーマを使用します
header: “Marpでスライド作成を試す” # ヘッダーに表示される文を指定できます
footer: “自由研究” # フッターに表示される文を指定できます
backgroundColor: white
headingDivider: 2 # 改ページの基準とする見出しレベル（”—“でどこでも改ページできます）
paginate: true # ページ番号を下部に表示する
size: 16:9 # スライドの縦横比の指定
math: katex # LaTexで数式を記述しています
—
“`
* 冒頭と最後の `—` は必要です
* `headingDivider: 2` はレベル2の見出しの行から新しいページとする設定です
* 見出し2はページの見出しになります
* レベル3の見出しは改ページされません（ページ内の見出しになります）
* `footer` は各ページフッタ部に表示する文字で今回は「自由研究」としてみました
* その他の設定項目はコメントから推測できると思います
## 画像を挿入する
前回しました先人の知恵 [Marp入門〜応用｜markdownでプレゼン資料を楽に素早く作って発表しよう](https://zenn.dev/cota_hu/books/marp-beginner-advanced) では、画像の挿入を便利にするための手順も紹介してくださっています。
* [画像を貼り付けて保存・表示する仕組みを作ろう](https://zenn.dev/cota_hu/books/marp-beginner-advanced/viewer/develop-7)
* Visual Studio Marketplace から [Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image) を導入します
* `.vscode\settings.json` ファイルに数行の設定を記入して保存します（上記資料参照）
これで、クリップボードにコピーした画像をVSCode上でペーストするだけで、自動的にMarkdown記法に変換して画像の保存と入力を代行してくれます。
試してみました・・・
過程はお見せ出来ませんが、あっさり成功して驚きです。これは便利。
というわけで、このブログ記事もマークダウンで書いているので、どんな感じに表示されたかをご参考までに。
（シェルで実行します：npx @marp-team/marp-cli -s ./src）← ./src は適宜変更してください
スライドを選択できる状態でページが表示されました。blogslide と記載されたリンクから、スライドが実行されました。
こんな感じでスライドのページが表示されました。
是非、環境を構築して試してみてください。