📃

marpいいぞって話

2024/10/09に公開

Markdown

slide

Marp

tech

こんにちは！普段TypeScriptを使ってフロントエンド開発をしている人です🙌
今回は、Markdownをベースとしたmarpについて私なりのいい感じだと思うstyleや実際の使い方についてご紹介します！

ideaとして投稿するべきか悩んだのですが、marpを書くための方法なども紹介しているため、今回はtechで出してみました。

 そもそもMarpとはMarkdownでスライドを作れるツールとなります。

Visual Studio Codeを使用している方であれば、拡張機能から「Marp for VS Code」をインストールすると使用することができます。
基本的な書き方はMarkdownと同じで遷移図などの複雑な図を作成したりするのは難しいためそのような場合はdraw.ioを使用して画像の添付とします。
https://marp.app

 環境作成ここではvscodeを使用していることを前提で進めていきます。
①　拡張機能で「Marp for VS Code」をインストールします。
!拡張機能で「Markdown Preview Enhanced」がインストールされているか確認しておいてください
②　Markdownと同じく.mdとなるようにファイルを作成します。

今回は、MARP.mdにしてみます。(命名センスの無さ…)
③　marpの良さであるcssを書くファイルを作成しましょう。

私は複数のstyleを作りたいため,stylesフォルダを作成してその中に各cssを追加する感じにします。

今回の構成はこれ↓
├── styles/
│   └── templateTheme.css
│   └── a4theme.css
└── MARP.md
ここまでできたら次はcssがmarpに反映されるようにvscodeの設定を行います。

自分のvscodeの設定をあまりごちゃごちゃ書きたくないなって方はsetting.jsonを用意するといいでしょう🙆‍♀️

 設定を変更する場合①vscode左下の歯車マークから設定を開きます。

②設定の検索で「marp」と検索します。

③「Markdown › Marp: Themes」でcssファイルのパスを追加していきます。
(今回のパスは「styles/templateTheme.css」、「styles/a4theme.css」のようになります。)

 setting.jsonを用意する場合少し上のフォルダ構成から変更してsetting.jsonを作成します。
├── .vscode/
│   └── setting.json
├── styles/
│   └── templateTheme.css
│   └── a4theme.css
└── MARP.md
setting.json
{
    "markdown.marp.themes": [
        "styles/a4theme.css",
        "styles/templateTheme.css"
    ],
}
ここまでできたらcssの設定が完了しました！

…ですが上記にあるMarkdown Preview Enhancedをインストールしている場合markdownのようなプレビューが見れない場合があります。

 Markdown Preview EnhancedをインストールしているときMarkdown Preview Enhancedをアンインストールするか以下の手順となります。
＜設定で変更する場合＞

設定の検索で「markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons」と検索してfalseにします。
＜setting.jsonを書いている場合＞

"markdown-preview-enhanced.hideDefaultVSCodeMarkdownPreviewButtons":falseを追加してください。

 Marpの書き方topは「これはmarpを使用します」という合言葉のようなものがあるのでそれを書きます。
MARP.md
---
marp: true
theme: template-theme
---
themeについてはまた後で詳しく書きますが、cssで決めたthemeを入力します。

基本的な記法についてはmarkdownと同じです。marp独自の書き方はdocumentは以下のリンクから
https://marpit.marp.app

 cssの書き方cssファイルのトップにテーマの名前とmarpに最適化されたデフォルトのテーマを呼び出すようにします。

(デフォルトのテーマを呼び出さない場合、全て１からcss書くことに…😱)
templateTheme.css
/* @theme template-theme*/
@import "default";

//自分で作成するcssの内容


 作ってみておすすめなstyle作成していて失敗した点も踏まえながら私がお勧めしたいstyleを二つ紹介します。🙌

 ヘッダーとフッターを加えたstyle直接.mdのファイルに書くこともできますが、統一したstyleを作りたかったので、書いてみました。

やりたかった内容としては以下の３点です。
画面右上にロゴを置く
フッターの部分に色をつける。
フッターの左端からコピーライトと右端にページネーションを書く

 失敗ページネーションの追加とfooterの追加を.mdで行い、footerのstyleを追加してみました。
MARP.md
---
marp: true
size: 4:3
theme: template-theme
---

<!-- paginate: true -->
<!-- footer: Copyright-->

スライド１

画面右側はバックグラウンドにした image

![bg right w:90%](./image.svg)

section {
  width: 1280px;
  height: 720px;
  font-size: 12px;
  padding: 0;
}

section footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: cyan;
}
実際に出来上がったものがこちら(header未実装)
なんかフッター短くないか…？

画面右側に画像を置くために画像をバックグラウンドイメージにしたのが原因のようでした。

でも、画像右で統一したいんだ💢となったのでちょっと無理矢理ですがcssを作ってみた結果がこちら。

 成功MARP.md
---
marp: true
size: 4:3
theme: template-theme
---

<!-- paginate: true -->
<!-- classes: slides-->
<!-- footer: Copyright-->

スライド１

画面右側はバックグラウンドにした image

![bg right w:90%](./image.svg)

section {
  width: 1280px;
  height: 720px;
  font-size: 12px;
  padding: 0;
}

section::after {
  position: absolute;
  bottom: 0px;
  right: 10px;
  z-index: 10;
  //color: white;
}

section.slides {
  background-image: url("./image.svg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 70px;
  padding-left: 3rem;
}

section::before {
  content: "Copyright";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
  padding-left: 10px;
  padding-bottom: 2px;
  font-size: 20px;
  background: cyan;
  z-index: 10;
}
実際に出来上がったものがこちら(右上の四角はロゴのつもり…)
いい感じじゃな〜い？

cssの基本的な書き方はdocumentに書いてあるので何が何だかよくわからない方はdocumentを読むかこの記事にコメントしてください！

 A4サイズのstyleせっかくなら社外にも出せるような資料を作りたいと思い、A4サイズのテンプレートのスタイルを作成しました。
/* @theme a4-theme*/
@import "default";

:root {
  font-size: 12px;
  width: 210mm;
  height: 297mm;
}

section {
  padding-left: 3rem;
  padding-right: 3rem;
  img {
    display: "block";
    margin: "0 auto";
  }
  svg {
    display: "block";
    margin: "0 auto";
  }
}
画像が中央寄せになり、widthとheightがA4サイズと同等となるstyleです。

ヘッダーとフッターを加えたい場合は上のちょっと長めのスタイルを追加するとできるようになります。

 まとめエンジニアが使い慣れているであろうMarkdownを使用していい感じのスライドが作れるmarpについてのお話でした。

少しでも皆さんの資料づくりなどに役立てばもう万歳です。
また、誤字脱字や、内容が異なっていることに気づいた方、こういう書き方をしたらもっと短くstyle書けるよ！などありましたらコメントしていただけると嬉しいです！！

そもそもMarpとは

環境作成

設定を変更する場合

setting.jsonを用意する場合

Markdown Preview Enhancedをインストールしているとき

Marpの書き方

cssの書き方

作ってみておすすめなstyle

ヘッダーとフッターを加えたstyle

失敗

成功

A4サイズのstyle

まとめ

Discussion