Marpが前よりも使いやすくなっていたので、触ってみた

はじめに

ずっと前から、スライドを何とか Markdown でかけないかをずっと考えていまして、昔は Marp を使っていました。
しかし、かゆいところに手が届かないのが欠点で、ここ最近はrevealjsというライブラリの VSCode 拡張機能版cscode-revealを利用しておりました。
こちらもめちゃくちゃ良くて、html でイカしたスライドを作りたいなら、めちゃくちゃありな選択肢だと思います。

ずっとcscode-revealを利用していたのですが、こちらは pdf 化を行うときがうまく行かず、pptxやpdfの資料として作成するには少し辛いものがありました。そこで再度検索したところ、Marp がバージョンアップしており使いやすくなっていたので、今回紹介します。

公式 Repository

Marp の良い点

個人的には

• Marp-CLIの誕生
• Marp for VS Codeがある
• Docker コンテナもあるよ
• 公式 Documentが充実してきた

辺りがとても良いと思っており、助かってます。

実際に使ってみる

Marp-CLI

公式の言うとおりに、npmコマンドを用いてインストールする。
今回はグローバルにインストールしました。

1

npm i -g @marp-team/marp-cli

公式の Repository に習ってとりあえず pdf を生成してみます。
Markdown の Sample は最後に乗せています。

1

marp [変換するmarkdownファイル] --pdf

上記コマンドで、pdf 化が行えます。
結構いい感じで pdf 化してくれてます。

変換後の pdf

他にも--pptxでパワポにもできたりするので、お試しあれ 😏

Marp-CLI(Docker)

こちらも、公式の言うとおりにコマンドを実行します。

1

docker run --rm -v $PWD:/home/marp/app/ -e LANG=$LANG marpteam/marp-cli [変換するmarkdownファイル]

docker を利用しても、ちゃんと pdf 化できていることが確認できます。

変換後の pdf

Docker コンテナでコンバートする際の font 問題

日本語のフォントがコンテナ内部のものに依存しているからか、微妙なフォントになっています。 docker イメージに他のフォントがないからかも(alpine linux だし)と思い、

Alpine Linux fonts

を参考に Google Fonts をインストールしたイメージを作成しましたが、うまくいきませんでした。

解決策

いろいろ試しましたが、style を利用してフォントを外部インポートする方法でうまくコンバートできました。
以下の例では googleFont をインポートしてます。Google が提供しているフォントで良いのであれば、こちらでポチポチすれば下記のインポート用のコードまで作成してくれます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

---
marp: true
<!-- marpの設定 -->
---

<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
section {
    font-family: 'Noto Serif JP', serif;
}
</style>

<!-- 以下より資料用のテキストを記載する -->

上記 style を含めてコンバートした際の pdf

上記では、Noto Serif JPをインポートしてますが、おすすめは

• Noto Sans JP
• M PLUS 1p

です。

さいごに

Marp みたいな、イイ感じじゃないものをいい感じにするツールはやっぱり最高だと思いました！
製作者に感謝 🙇‍♂️

サンプル