Humanophilic Marp Theme

学会発表用のスライドテーマです。Marpを使ってスライドを作成する際に利用できます。

環境構築

npm ci

以下のコマンドでスライドのプレビューを確認することができます

npm run presentation

また、以下のコマンドでPDF・PPTXを出力することができます

npm run export

vscodeの場合は、Marp for VS Codeをインストールすることで、簡単にプレビューを確認することができます。

スライドの作り方

slide.mdにスライドの内容を以下のようなフォーマットで記述します。区切り線（---）でページを区切ります。また、marpの独自記法が沢山あるので、Marp Basic Exampleを読んでおくことをおすすめします。

---
marp: true
theme: humanophilic
paginate: true
---

# 1ページ目

<!-- 1ページ目のスピーカーノートを書くことができます -->

---

# ２ページ目

スライドのテンプレート

themes/humanophilic.scssの中でスライドのテンプレートを定義しています。mdには_classを使ってテンプレートを指定します。また、以下のように新規のテンプレートを追加することもできます。

section {
  &.テンプレート名 {
    // テンプレートのスタイルを記述
  }
}

<!-- _class: テンプレート名 -->

タイトルページ

<!-- _class: title -->

<div class="top">
  <h1 class="title">ここに研究内容が<br />入ります</h1>
  <p class="subtitle">XXX研究会</p>
</div>
<div class="bottom">
  <p class="name">九大 太郎</p>
  <p class="affiliation">九州大学大学院システム情報科学府</p>
</div>

メインページ

# テストページ

ここに文章を書きます

- こんな感じで
- リストもかけます

中央寄せページ

<!-- _class: center -->

# 中央寄せのページ

テーマのカスタマイズ

theme/humanophilic.scssを編集することでテーマをカスタマイズすることができます。テーマを修正した場合は、以下のコマンドでcssを出力する必要があります。

npm run build

また、新規でテーマを作成する場合は、新規のscssファイルを作成し、themesディレクトリに配置してください。また、Marp for VSCodeを使っている場合は、settings.jsonにcssのパスを記述する必要があります。

参考資料

• Marp公式サイト
• Marp Basic Example
• Marp for VS Code
• Marp Core built-in themes
• Marpit Markdown