Zenn
Closed7

Marpの使い方

Markdown
Marp
shotakahashotakaha

ディレクティブ

  • スライドの設定みたいなもの
  • global / local / spot なディレクティブがある
  • ディレクティブにより設定が適用される範囲がある
  • spot directivesは_設定項目のように_をつける

https://marpit.marp.app/directives

shotakahashotakaha

フロントマター

  • ファイルの先頭にYAML形式で記述すればOK
  • スライド全体に適用したいローカルディレクティブもここで設定する
---
marp: true
theme: gaia  or uncover (or カスタムテーマ）
paginate: true
---
shotakahashotakaha

スライド番号を表示したい

---
marp: true
theme: gaia
paginate: true
---

タイトルのスライド番号は非表示にしたい

---
marp: true
theme: gaia
paginate: true
_paginate: false
---

ローカルディレクティブ（_paginate: false）を使って、最初のページのスライド番号を非表示にする

shotakahashotakaha

スライドのデザインを微修正したい

  • スライドは以下のように <section>をベースにしたHTML構造になっているそう
  • <style>を指定して部分的に修正することができる
<section>
  <header>Header content</header>
  <h1>Page 1</h1>
  <footer>Footer content</footer>
</section>

<section>
  <header>Header content</header>
  <h2>Page 2</h2>
  <footer>Footer content</footer>
</section>
shotakahashotakaha

タイトルとページでデザインを変更したい

  • Keynoteのマスタースライドにある Title & Subtitle と Title & Bullets のようなことがしたい
  • <section>にclassを追加することで同様のことができる
（任意の名前）.md
<!--
_class: title
-->

# タイトル

## 名前
### 日時
### 場所

---

<!--
class: page
-->

# スライド2

---

上記の内容のファイルはmarpの中で、次のような構造をもつHTMLだと理解される

marp内で処理されるHTMLの構造
<section class="title">
<h1>タイトル</h1>
<h2>名前</h2>
<h3>日時</h3>
<h3>場所</h3>
</section>

<section class="page">
<h1>スライド2</h1>
</section>

このHTML構造を念頭においてCSSの骨組みを作成する

（任意の名前）.css
section.title h1 { /* タイトルのスタイル設定 */ ; }
section.title h2 { /*  名前のスタイル設定 */ ; }
section.title h3 { /*  日付／場所のスタイル設定 */ ; }

section.page h1 { /* ページタイトルのスタイル設定 */; }
section.page h2 { /* ページタイトルのスタイル設定 */; }
section.page h3 { /* ページタイトルのスタイル設定 */; }
このスクラップは2023/12/30にクローズされました