Marpで会社用スライドを作成

May 15, 2021

#vscode

#misc

きっかけ
作ったもの
作成手順
参考

きっかけ

国産OSSをまとめてみたの記事から、 Marpというマークダウンからスライドを生成するツールがあることを知った。会社ではPPTでスライドを作ることが多いが、Gitとの相性は悪いのでMarpに変えていきたいところ。

Marpではデフォルトのデザインテーマがあるが、普段会社で使っているものと差が大きいのでカスタムが必要だった。 CSSの知識は乏しいのでググりながら作成してみた。

作ったもの

GitHubのmarp-sampleで公開中。デザインはタイトル用、コンテンツ用、最後の締め用の3種類を用意。マークダウンからエクスポートしたPPTページの例は下記の通り。

作成手順

VSCode設定

Marpをインストール。 settings.jsonは下記の通りに設定。カスタムCSSの相対パスとマークダウン内のHTML記述を有効にする。

{
    "markdown.marp.themes": [
        "./themes/custom.css"
    ],
    "markdown.marp.enableHtml": true
}

マークダウン

sample.mdを作成。最初にMarpの設定を記述する。

marp: true
theme: custom
footer: 2021/05/15 <span style="color:white;font-weight:bold;box-sizing:border-box;border:20px solid #df546b;background-color:#df546b;margin-left:30px">Confidential</span>
paginate: true
size: 4:3

themeで作成するCSSを指定する。settings.jsonと合わせること。

footerで日付と”Confidential”を表示する。 Confidentialだけデザインを変えたかったので、直接styleタグを使って指定している。もっとスマートな方法があると思う。 “Confidential”が必要なければなくせばよい。

次にスライド用のマークダウンを記述していく。 3種類のデザインはディレクティブで切り替える。

---
<!--_class: top-->

# タイトル
## 会社
## 部署
## 氏名
## Email:

---
<!--_class: normal-->

# 見出し
## Test
### Test
#### Test
##### Test

---
<!--_class: final-->

<!--最後のページ-->

カスタムCSS

gaiaテーマを元に下記記載のcustom.cssを作成した。 gaiaテーマを直接いじりたいと思い、公式にあるgaia.scssをcssにコンパイルして使ってみたが上手くいかなかった。時間があれば再チャレンジしたい。

/* @theme custom */

@import "gaia";

section::after,
footer {
  color: white;
  background-color: #44aada;
  height: 45px;
  margin-bottom: 0px;
  font-size: 60%;
  padding: 0px 20px 0px 20px;
}

section {
  background-color: white;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}

section.top {
  background-image: url(./img/logo.svg);
  background-repeat: no-repeat;
  background-size: 600px;
  background-position-x: center;
  background-position-y: 180px;
}

section.top h1 {
  color: slategray;
  font-size: 2rem;
  margin-top: 280px;
  margin-bottom: 20px;
  text-align: center;
}

section.top h2 {
  color: rgb(68, 67, 67);
  font-size: 0.65rem;
  margin-top: 0px;
  text-align: right;
}

section.normal {
  padding: 50px 50px 50px 50px;
  background-image: url(./img/logo.svg);
  background-repeat: no-repeat;
  background-size: 250px;
  background-position: right 50px top 50px;
}

section.normal h1 {
  color: rgb(68, 67, 67);
  font-size: 1.6rem;
  border-bottom: 2px solid #44aada;
  margin-bottom: -15px;
}

section.normal h2 {
  font-size: 1.3rem;
}

section.normal h3 {
  font-size: 1.1rem;
}

section.normal h4 {
  font-size: 1.0rem;
}

section.final {
  background-image: url(./img/logo.svg);
  background-repeat: no-repeat;
  background-size: 800px;
  background-position-x: center;
  background-position-y: center;
}

備考
- ページ番号(paginate)はsection::afterで指定する。