Markdownを活用する（Vol.93掲載）
著者：藤原 由来
本連載では文書の装飾・構造付けを手軽に行える記法であるMarkdownを用いて、さまざまな文書や成果物を作成する方法を紹介します。今回は、プレゼンテーション用のスライドを作成するためのプレゼンテーションアプリ「Marp」について解説します。
シェルスクリプトマガジン Vol.93は以下のリンク先でご購入できます。
図1 Marp用にMarkdownで記述したテキストの例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
--- marp: true --- # 美味しいカレーの作り方 シェル花子 --- # 材料 - 玉ねぎ - にんじん - じゃがいも - 肉 - カレールー - 水 --- # 作り方 1. 材料を切る 2. 肉を炒める 3. 野菜を加える 4. 水を加えて煮る 5. カレールーを入れる |
図8 見出しレベル1をスライドの区切りにしたMarkdown形式のテキスト例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
--- marp: true headingDivider: 1 --- # 美味しいカレーの作り方 ## シェル花子 # 材料 ## ここに ### 材料を書く # 作り方 ## 適当に作る |
図11 スライドの背景や文字色を変更したMarkdown形式のテキスト例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
--- marp: true --- # 通常のスライド --- <!-- _backgroundColor: black _color: white --> # 背景が黒く文字が白いスライド --- <!-- _backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)" _color: white --> # 背景が青いグラデーションのスライド --- <!-- _backgroundImage: url('cat1.png') --> # 背景が画像のスライド |
図13 背景画像表示とぼかしフィルタ適用のMarkdown形式のテキスト例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
--- marp: true --- # 背景画像を表示する  --- # 背景画像にぼかしを入れる  |
図15 背景画像の横並びと縦並びのMarkdown形式のテキスト例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
--- marp: true --- # 背景に横並びに配置    --- # 背景に縦並びに配置    |
図20 ChatGPTが生成したMarkdown形式のテキスト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
--- marp: true theme: default paginate: true backgroundColor: #f0f0f0 --- # 知られざるインドカレー ### シェル花子 --- # 目次 1. 北インド: パニール・バターマサラ 2. 南インド: チェッティナード・チキンカレー 3. 西インド: ゴア・フィッシュカレー 4. 東インド: コサ・マンシャ 5. 中央インド: ダールバーフライ 6. 北東インド: アクホニカレー --- # 1. 北インド: パニール・バターマサラ - クリーミーで濃厚なグレイビー - トマト、バター、クリームを使用 - パニール（カッテージチーズ）入り - パンジャーブ地方で有名 - ナンやバスマティライスと食べる --- （略） |