Marpの使用方法

概要

Marpとは、マークダウンから美麗なスライドを簡単に作成できるツールのことである。
テキストを記述するだけで再編集もしやすいという利点もある。

スライドの作成

ページの作成

---：区切り線を入れることでスライドを新規で作成することができる。

スライド１
 
---
スライド２
 

以下のような感じとなる。

画像の挿入

画像を挿入するには、CommonLink形式[alt](パス)を使用する。

![](Config/Extra/skadi_ico.png)

このCommonLinkの[]部分にプロパティを使用することができる。

背景

背景に画像を設定したい場合はbgと入れる。
大きさは自動的に設定される。

![bg](Config/Extra/skadi_ico.png)

サイズの指定

画像サイズを指定するには、w:100やh:100のような形で記述する。

![w:600](Config/Extra/skadi_ico.png)

画像のフィルター

以下に画像フィルターの一覧を載せる。

markdown	w/ arguments
![blur]()	![blur:10px]()
![brightness]()	![brightness:1.5]()
![contrast]()	![contrast:200%]()
![drop-shadow]()	![drop-shadow:0,5px,10px,rgba(0,0,0,.4)]()
![grayscale]()	![grayscale:1]()
![hue-rotate]()	![hue-rotate:180deg]()
![invert]()	![invert:100%]()
![opacity]()	![opacity:.5]()
![saturate]()	![saturate:2.0]()
![sepia]()	![sepia:1.0]()

背景のRow, Column

背景を横並びに表示するには、ただbg要素を連続して記述するのみである。

![bg](Config/Extra/skadi_ico.png)
![bg](Config/Extra/skadi_ico.png)
![bg](Config/Extra/skadi_ico.png)

縦に配置する場合は、bg verticalプロパティを使用する。

![bg vertical](Config/Extra/skadi_ico.png)
![bg](Config/Extra/skadi_ico.png)
![bg](Config/Extra/skadi_ico.png)

画像の左右配置

画像をスライドの右や左に配置したい場合はbg leftかbg rightを入れる。

//左
![bg left](Config/Extra/skadi_ico.png)
 
//右
![bg right](Config/Extra/skadi_ico.png)

割合指定

左右の画像割合を指定するには、left:70%、right:100%のように記述する。

//左
![bg left:70%](Config/Extra/skadi_ico.png)
 
//右
![bg right:70%](Config/Extra/skadi_ico.png)

ヘッダーやフッターの追加

ヘッダーやフッターの使用にはhtmlのコメント形式で挿入する。

<!-- header: "自己紹介" ---> ヘッダーを指定
<!-- footer: "©︎rerurate" ---> フッターを指定

アンダーラインを使用するとそのスライドのみの適用となる。

<!-- header: "自己紹介" ---> これ以降の全てのスライドに適用
<!-- _footer: "©︎rerurate" ---> 指定したスライドのみに適用

スライドのスタイルを変更する

スライドのスタイルを変更するにはhtmlのような形で記述する。

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

CSSの適用

まず、cssファイルを作成する。
そして、テーマ名を決める。

/* @theme:mytheme */

最初に@themeを記述する。

そしてcssを記述していく。

ちなみにデフォルトで用意されているテーマは以下の三種類。

• default
• gaia
• uncover

ダークモード適用には
yamlFrontmatter(プロパティ)に

class: invert

と記述する。

要素クラス

要素クラスの一覧をいかに示す。

名称	概要	備考
:root	これはスライド全体をさす。
section	各スライドをさす。

Fragment List

Marpにはリストがあった場合にそれをクリックごとに表示するPowerPointのアニメーションに対応する機能（Fragmented List）が存在する。

* Fragment
* List
 
- Not Fragmented
- List
 
1) Fragmented
1) Numbered List
 
1. Not Fragmented
1. Numbered List
 

Obisidian-Marp

Export-Log

NodeJSをインストールしてから以下のコマンドを実行してMarpを導入する

npm install -g @marp-team/marp-cli@latest