シェルスクリプトマガジン

Markdownを活用する(Vol.93掲載)

著者:藤原 由来

本連載では文書の装飾・構造付けを手軽に行える記法であるMarkdownを用いて、さまざまな文書や成果物を作成する方法を紹介します。今回は、プレゼンテーション用のスライドを作成するためのプレゼンテーションアプリ「Marp」について解説します。

シェルスクリプトマガジン Vol.93は以下のリンク先でご購入できます。

図1 Marp用にMarkdownで記述したテキストの例

---
marp: true
---

# 美味しいカレーの作り方  

シェル花子

---

# 材料

- 玉ねぎ
- にんじん
- じゃがいも
- 肉
- カレールー
- 水

---

# 作り方

1. 材料を切る
2. 肉を炒める
3. 野菜を加える
4. 水を加えて煮る
5. カレールーを入れる

図8 見出しレベル1をスライドの区切りにしたMarkdown形式のテキスト例

---
marp: true
headingDivider: 1
---

# 美味しいカレーの作り方  

## シェル花子

# 材料

## ここに
### 材料を書く

# 作り方

## 適当に作る

図11 スライドの背景や文字色を変更したMarkdown形式のテキスト例

---
marp: true
---

# 通常のスライド

---

<!-- 
_backgroundColor: black
_color: white
-->

# 背景が黒く文字が白いスライド

---

<!-- 
_backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)" 
_color: white
-->

# 背景が青いグラデーションのスライド

---

<!-- 
_backgroundImage: url('cat1.png')
-->

# 背景が画像のスライド

図13 背景画像表示とぼかしフィルタ適用のMarkdown形式のテキスト例

---
marp: true
---

# 背景画像を表示する

![bg cover](cat1.png)

---

# 背景画像にぼかしを入れる

![blur bg cover](cat1.png)

図15 背景画像の横並びと縦並びのMarkdown形式のテキスト例

---
marp: true
---

# 背景に横並びに配置

![bg](cat1.png)
![bg](cat1.png)
![bg](cat1.png)

---

# 背景に縦並びに配置

![bg vertical](cat1.png)
![bg](cat1.png)
![bg](cat1.png)

図20 ChatGPTが生成したMarkdown形式のテキスト

---
marp: true
theme: default
paginate: true
backgroundColor: #f0f0f0
---

# 知られざるインドカレー
### シェル花子

---

# 目次
1. 北インド: パニール・バターマサラ  
2. 南インド: チェッティナード・チキンカレー  
3. 西インド: ゴア・フィッシュカレー  
4. 東インド: コサ・マンシャ  
5. 中央インド: ダールバーフライ  
6. 北東インド: アクホニカレー  

---

# 1. 北インド: パニール・バターマサラ

- クリーミーで濃厚なグレイビー
- トマト、バター、クリームを使用
- パニール(カッテージチーズ)入り
- パンジャーブ地方で有名
- ナンやバスマティライスと食べる

---

(略)