🗂

Marpをカスタマイズして爆速スライド開発環境を手に入れよう

2023/10/05に公開

Scss

PostCSS

Marp

tech

はじめに

みなさん、Marp使ってらっしゃいますか？

いいですよね、Marp。

今回は、ただVSCodeの拡張機能を入れるだけでも便利なMarpをさらにカスタマイズしてテンプレートリポジトリにして公開してみた話です。

まず、成果物

是非cloneして使ってみてください。

そもそもやりたかったこと

これまで簡易的なスライドはMarpで作り、ちょっと凝ったデザインのスライドはFigmaで作っていたが、Figmaでexportするとスライド一枚ずつexportされてしまい、それらを結合して、一枚ずつexportされたpdfを削除して、、、と面倒だった。

Marpでまとめて作ってしまおう！

目標はこれまでFigmaで作っていたスライドをMarpで再現すること

↓今回目標とするFigmaで作っていたスライドは以下のようなデザイン↓

sample_slide1
sample_slide2
sample_slide3
sample_slide4

作業手順

リポジトリ＆フォルダ作成
marp-cli導入とコマンド用意
scss postcss prettier stylelint導入
カスタムテーマの作成

リポジトリ＆フォルダ作成

githubでリポジトリ作ったら下ろしてきて、npm init打って、フォルダを作る

構成はこんな感じ

marp-slide-template
├ .vscode
├ markdown
├ images
├ style
│ ├ css
│ └ scss
├ pdf
├ pptx
└ package.json

個人的にpdf形式とpptx形式の時で出力先を分けたかったのでそれぞれフォルダを用意しているがもちろんまとめてoutputフォルダなどとしても良い。

marp-cli導入とコマンド用意

@marp-team/marp-cliを導入してpackage.jsonに各種コマンドを用意します

npm install -D @marp-team/marp-cli

{
  "scripts": {
    "new": "sh -c 'sed -e \"s/: \\(.*\\)#\\(.*\\)/: \\1/\" markdown/template.md > markdown/$([ \"$1\" != \"\" ] && { echo \"$1\";true; } || { uuidgen | cut -c1-2,25-36 | tr \"[:upper:]\" \"[:lower:]\"; }).md' --",
    "pdf": "sh -c 'file=\"$1\" && title=$(sed -n \"s/title: \\(.*\\)/\\1/p\" \"$file\" | sed -n \"s/^.//p\" | sed -n \"s/.$//p\") && marp \"$file\" -o \"pdf/$title.pdf\"' --",
    "pptx": "sh -c 'file=\"$1\" && title=$(sed -n \"s/title: \\(.*\\)/\\1/p\" \"$file\" | sed -n \"s/^.//p\" | sed -n \"s/.$//p\") && marp \"$file\" -o \"pptx/$title.pptx\"' --"
  }
}

な、長い、、、、
一つずつ見ていきます。

newコマンド

sh -c 'sed -e "s/: (.*)#(.*)/: \1/" markdown/template.md > markdown/$([ "$1" != "" ] && { echo "$1";true; } || { uuidgen | cut -c1-2,25-36 | tr "[:upper:]" "[:lower:]"; }).md' --

sedコマンドでtemplate.mdを複製して新たなmdファイルを作成します
s/: (.*)#(.*)/: \1/のところでmdファイル最初の設定値の箇所のコメントアウトを取り除きます
markdown/template.md > markdown/${new file name}.mdの箇所で新しいmdファイルに複製します
[ "$1" != "" ] && { echo "$1";true; } || { uuidgen | cut -c1-2,25-36 | tr "[:upper:]" "[:lower:]"; }の箇所は擬似的な三項演算子を用いています。
引数にファイル名が与えられればそれを採用し、与えられなければ12桁の英数字から成る文字列を採用します

pdf / pptxコマンド

sh -c 'file="$1" && title=$(sed -n "s/title: (.*)/\1/p" "$file" | sed -n "s/^.//p" | sed -n "s/.$//p") && marp "$file" -o "pdf/$title.pdf"' --

sh -c 'file="$1" && title=$(sed -n "s/title: (.*)/\1/p\" "$file" | sed -n "s/^.//p" | sed -n "s/.$//p") && marp "$file" -o "pptx/$title.pptx"' --

この二つのコマンドはやっていることは殆ど同じです

file="$1" && title=$(sed -n "s/title: (.*)/\1/p\" "$file" | sed -n "s/^.//p" | sed -n "s/.$//p")の箇所で対象となるmdファイルのパスと出力するファイルの名前を変数に格納します
sed -n "s/title: (.*)/\1/p\" "$file" | sed -n "s/^.//p" | sed -n "s/.$//p"の箇所でmdファイルの設定値のtitleの箇所を抜き出し、前後に付いている'または"を取り除きます(もっといい処理の仕方があるはずですが、一旦出来たので出来たのでこれで良しとしています)
marpコマンドで出力します（オプション一覧はこちら）

scss/postcss/prettier/stylelintの導入

scssをcssに変換して、postcssにautoprefixerとcssnanoを入れて最適化しています
stylelintとprettierも入れて.vscode/settings.jsonで保存時に自動整形するようにしています。
いつか、vscode以外のIDEを使っていても自動整形できるようにhuskyとlint-stagedも導入したいですね...

カスタムテーマの作成

基本的にレイアウトなどのカスタマイズはbase.scssにまとめ、base.scssを継承した各種カラーテーマで色を選択できるようにしました。現在目次用index-sectionクラス、色反転のinvertクラス、フッターを参考文献等を表示するためのthesis-footerクラスを用意しています。

また、いつも色選びで悩むため予めカラーのセットを複数用意しました。(現在6種類)
今後も良いカラーセットを見つけたら追加していきます！

完成品

当初やりたかったことの大半はできました

今回やってみて良かったこと

1. shellの理解がちょっとできた

特に今回使ったsedコマンドや擬似的な三項演算子の汎用性の高さを身にしみて感じたのでこれからも多用していきたい。

2. scssとpostcssの理解ができた

いつもvueやnuxtを使っている中で勝手に設定しておいてくれるため改めて環境構築する機会は意外と無かった。

3. 気楽にスライドが作れるようになった

これが一番大きい。スライドを作る際に悩むことが一気に減った。

最後に

この記事をご覧のみなさんも是非素敵なMarpライフを！

2023/10/06 追記

上記解説していたコマンドですが、バグが見つかったり、追加で実現したいことがあったり、安定性を増したいということになり、ちゃんとshファイルを作ってそこに切り分けることにしました。

new コマンド

引数の数が一つでない場合にログを出して終了するようにしました。
以前はsedコマンドでファイル内全体を対象にコメントアウトの削除をしていましたが、本文中の#マーク以下の部分（見出し等）を間違って削除してしまわないように対象範囲をyamlフロントマター内に限定するように変更しました。

pdf / pptx コマンド

引数の数が一つでない場合にログを出して終了するようにしました。
yamlフロントマター内のtitleを抜き出す際の正規表現をより汎用性のある形に変更しました。
以前はyamlフロントマター内のtitleに設定されている値をファイル名として採用していました。ただ、titleの値が空文字列の時に変になってしまっていたので、空文字列のときはmarkdownファイルのファイル名を代わりに採用するように変更しました。

合わせて呼び出し方法も変更しています。

// package.json
{
  "scripts": {
    "new": "sh ./bin/new.sh",
    "pdf": "sh ./bin/pdf.sh",
    "pptx": "sh ./bin/pptx.sh"
  }
}

GitHubで編集を提案