Creating a More Efficient Development Repository with Marp Slide Development Library

1. Marpでより楽に開発できる
リポジトリを作った話

2. 目次
01 Marpについて
02 使用可能なmarkdown記法の例
03 markdown記法の例
04 カスタマイズした点
各種コマンドの用意
scss/postcss/prettierの導入
カスタムテーマの作成
05 良かったこと
スライド開発ライブラリMarpでより楽に開発できるリポジトリを作った話
2

3. Marpについて

4. Marpについて
4

5. Marpとは
markdownconverterであるMarp/coreを中心として、それを拡張したフレームワークであるMarpitに加
えて、vscode用の拡張機能であるMarp-vscodeやCLIのMarp-cliなどのプロジェクトなどがある。
Marpについて
5

6. 使用可能なmarkdown記法の例

7. 見出し１
見出し２
見出し３
見出し４
見出し５
見出し６
平文
markdown記載例
7

8. 太字
斜体
太字+斜体
打ち消し線
quote
doublequote
const aa = 0
aaaa
listitem
listitem
1.listitem
2.listitem
markdown記載例
8

9. カスタマイズした点

10. 各種コマンドの用意
{
"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"' --"
}
}
な、長い、、、、
一つずつ見ていきます。
カスタマイズした点
10

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

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"' --
この二つのコマンドはやっていることは殆ど同じです
1. file="$1" && title=$(sed -n "s/title: (.*)/1/p" "$file" | sed -n "s/^.//p" | sed -n "s/.$//p") の箇所で対象となる
mdファイルのパスと出力するファイルの名前を変数に格納します
2. sed -n "s/title: (.*)/1/p" "$file" | sed -n "s/^.//p" | sed -n "s/.$//p" の箇所でmdファイルの設定値のtitleの箇所を抜
き出し、前後に付いている' または" を取り除きます(もっといい処理の仕方があるはずですが、一旦出来たので出来たのでこれで良しとし
ています)
3.marpコマンドで出力します（オプション一覧はこちら）
カスタマイズした点：①各種コマンドの用意
12

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

14. カスタムテーマの作成
基本的にレイアウトなどのカスタマイズはbase.scssにまとめ、base.scssを継承した各種カラーテーマで色を選択できるようにしました。現在
目次用index-sectionクラス、色反転のinvertクラス、フッターを参考文献等を表示するためのthesis-footerクラスを用意しています。
また、いつも色選びで悩むため予めカラーのセットを複数用意しました。(現在6種類)
今後も良いカラーセットを見つけたら追加していきます！
カスタマイズした点：③カスタムテーマの作成
14

15. 良かったこと

16. 1.shellの理解がちょっとできた
特に今回使ったsed コマンドや擬似的な三項演算子の汎用性の高さを身にしみて感じたのでこれからも多用していきたい。
2.scssとpostcssの理解ができた
いつもvueやnuxtを使っている中で勝手に設定しておいてくれるため改めて環境構築する機会は意外と無かった。
3.気楽にスライドが作れるようになった
これが一番大きい。
良かったこと
16

17. Thankyouforlistening!!