visual studio codeにおけるMarpの使い方

Marpはマークダウン記法を使用してプレゼンテーションスライドを簡単に作成できるツールである。ルールを守れば既存のマークダウンファイルをスライド形式で表示することが可能。
visual studio code上でMarpを使うための拡張機能が提供されており簡単に使用することができる。

---

拡張機能のインストール

まずは以下から拡張機能をインストール
https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

以降でmdファイルをMarpとして記述するための記法について説明する。

---

マークダウンファイルをMarpとして認識させる

mdファイルの1行目に以下を追記する。

*.md

---
marp: true
---

上記の記述がMarpとして認識させるフラグとなる。
フラグを立てた状態でvs codeデフォルトのマークダウンプレビューで表示すると、
スライド形式で表示される。falseにすることで通常のmdファイルプレビューに簡単に切り替えることができる。

---

スライド区切り

---でスライドを区切ることができる。

---以外でスライド区切りを判定する

<!-- headingDivider: 2 -->を追加すると、見出しレベル2以上の場合はスライドタイトルとしてみなされ、スライドが自動的に区切られるようになる。
これを設定すると---をスライド区切り線として挿入する必要がなくなる。

---

Local directives とは

前述のmarp: trueのようなMarpで設定できるプロパティをLocal directivesと呼び、
以下を設定することができる。

Name	Description
marp	marpの有効化
theme	テーマの指定(※1)
paginate	trueを指定した場合は、スライドにページ番号を表示
header	ヘッダーの内容を指定
footer	フッターの内容を指定
class	スライドの<section>要素のHTMLクラスを指定(※2)
backgroundColor	background-colorのスタイル
backgroundImage	background-imageのスタイル
backgroundPosition	background-positionのスタイル
backgroundRepeat	background-repeatのスタイル
backgroundSize	background-sizeのスタイル
color	colorのスタイル
style	後述

※1
デフォルトで用意されているテーマとしてdefault, gaia, uncoverが選択できる。
自作CSSも設定可能(後述)

※2
自作CSSを作成することで自分で定義したクラスを使うことができる。
クラスの定義方法については後述

---

styleとは

sytleはMarpでスライド形式で表示する際の文字の大きさや色、位置などを定義するうえで必要となる。何も設定しなければdefaultテーマで表示される。
表示方法を変更したい場合はcssを自分で記述したり、ルールに沿ってマークダウンファイルに直接記載する方法がある。

MarpのCSSで定義できるstyle

以下の通り、まだ使えるものはあるかも(筆者はhtmlやcssは知見がないため不足あり)。

style	description
h1	見出し1
h2	見出し2
h3	見出し3
h4	見出し4
h5	見出し5
h6	見出し6
a	ハイパーリンク
p	段落
ul	箇条書き
ol	順序付きリスト
section	スライド全体
table	表
tr	行全体
th	表の見出し
td	データ

---

自作CSSフォーマット

公式ドキュメントのこちらを参考に記述する。

*.css

/* @theme marpit-theme */

section {
  width: 1280px;
  height: 960px;
  font-size: 40px;
  padding: 40px;
}

h1 {
  font-size: 60px;
  color: #09c;
}

h2 {
  font-size: 50px;
}

• sectionはスライド全体に適用される設定
• h1は見出し1の設定
• h2は見出し2の設定

これを適当な*.cssファイルとして保存しておく。

---

自作CSSを適用させる

vs code上で以下の手順で自作cssをMarpに適用できる。

1. ctrl + ,
2. markdown.marp.themesで検索
3. 項目の追加を選択
4. cssのファイルのパスを入力
   開いているプロジェクトからの相対パスで入力
   入力例：./marp-themes/kabec_theme.css

*.workspaceファイルで管理しているのであれば、以下の記述を追加しても可能

{
	"folders": [
		{
			"path": "."
		}
	],
	"settings": {
		"markdown.marp.themes": [
			// 自作CSSファイルのパスを入力
			"./marp-themes/kabec_theme.css"
		],
	}
}

---

styleをmdファイルに直接記述

cssを準備しなくても以下のように各mdファイルで見出しや文字列のsytleを定義することができる。

*.md

marp: true
style: |
  section {
    background-color: #ccc;
  }
  header {
    position: absolute;
    left: 5px; top: 5px;
    font-size: 20px;
  }

  footer {
      position: absolute;
      left: 5px; bottom: 5px;
      font-size: 20px;
  }

他の環境で同じstyleでMarpを表示したい時などに用いる。
以下、記述例

*.md

style: |
  section.toc h2 {
      color: #fff;
      border:0;
  }
  section.toc a {
      color: #000;
  }
  
  section.toc li {
      font-size: 90%;
  }
  
  section.toc>ul {
      list-style-type: none;
      position: relative;
      left: 90px;
      overflow: hidden;
  }
  
  section.toc>ul ul {
      list-style-type: decimal;
  }
  
  section.toc>ul ul>li {
      width: 45%;
      float:left;
      clear:left;
  }
  section.toc>ul ul>li:nth-child(n+8) {
      position:relative;
      top: -3.5em;
      left: 50%;
  }

---

特定のスライドだけにLocal directivesを適用させる

対象スライドの文字列を入力する前に以下を追記する。

<!--
# 背景色
_backgroundColor: black
# 文字色
_color: white
-->

各設定値の先頭に_を記述することでそのスライドだけに適用することができる。

---

特定のスライドの見出し・文字列の設定だけを変更する

対象スライドの文字列を入力する前に以下を追記する。

<style scoped>
section {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
text-align: center;
}
</style>

scopedを設定しない場合は全スライドに適用される。

複数設定も可能

<style scoped>
h1 {
    color: yellow;
    font-family: "Arial", "Hiragino Kaku Gothic ProN";
    font-size: 60px;
    text-align: center;
}
h2 {
    color: yellow;
    font-family: "Arial", "Hiragino Kaku Gothic ProN";
    font-size: 60px;
    text-align: center;
}
p {
    color: yellow;
    font-size: 30px;
    columns: 2 15em;
	  column-rule: 1px dashed #cdcdcd;
	  column-gap: 2em;
}
</style>

---

自作のクラスの定義と呼び出し

例えば、以下のようにcssに定義し、

section.right h1 {
  text-align: right;
}

mdファイル側で以下のように呼び出す

<!--
_class : right
-->

section.rightのright部分だけをmdファイル側では記述する。
これで見出し1の表示が右寄せになる。
ちなみに_class : leadは事前に定義されており、スライドタイトルを中央寄せで表示することができる。

---

背景を変更する

タイトルの前にmd記法で画像を挿入
html記法では機能しない。

![bg brightness:0.5](background_img.jpg)
![bg left brightness:0.5](background_img.jpg)
![bg right brightness:0.5](background_img.jpg)

---

所感

• mdファイルをスライド形式で表示できるのは非常に画期的
• ただし、デフォルトで用意されているスライドテーマではシンプルなスライドしか作れない
  ※これが本来の利点だが
• スライド作成時に時々使う2列表示などがデフォルトではできない。
• スライドの形式を凝りだすとcssを大量に記述する必要があるので、
  シンプルにスライドが作成できるという利点が失われてしまう。
• あくまでmdをスライド形式で表示する機能は副次的な要素として捉えるほうがよさそう。
• どうしてもスライド形式で資料を展開する必要がある場合は活用する。

---

reference

• marp
• marp-core/themes/gaia.scss
• Marp(Marpit)
• 【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る
• Marp(Markdown Presentaiton)の文法まとめ
• Marp for VS Code に頑張って CSS をあててみた
  目次の2段組みの例
• Markdownからスライド資料を作成できる『Marp』を試してみる
• Marp(Markdown Presentaiton)の文法まとめ
• VSCode + Markdownでスライドや書籍も書いちゃおう！

その他

CSSの書き方

• CSSプロパティ一覧
• コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに
• 【HTMLで箇条書き】ul・ol・liタグの使い方まとめ
• 表（table）の作り方と装飾の変え方【HTML＆CSS】

SlideV

Marp以外のプレゼンテーションツールとしてSlideVというものがあるらしい

• Slidevを導入してMarkdownで美しいスライドを書こう

その他

• 結局Markdownでプレゼン資料ってどれで作ると良いのよ？と思ったときの選択肢
• VSCodeの別ウィンドウでリアルタイム同期プレビュー
• すべての社内文書はMarkdownで書けばいいと思うこれだけの理由
• 開発者が考える提案書テンプレート markdown版