typememo.jp

marp 自作テーマが適用できない人は marp-cli を使えばいいと思う

2020.10.31

#tech#marp#cli
Takeru Yamada

Contents


はじめに

marp の自作テーマが適用できないー! という風に頭を抱えている人向けの救済記事です.

vscode に自作テーマ css のパスを通しているのに,なぜ と困っている人は是非読んで欲しいです.

その問題 marp-cli を使えば解決できますよ.

本記事では marp-cli の最低限の使い方をご紹介します.

気になる方は読み進めていただければと思います.


marp-cli をインストールする

さて,まずは marp-clinpm コマンドでインストールしましょう.

$ npm install -g @marp-team/marp-cli

npm コマンドがまだ有効になっていない方は, asdf node.js のバージョン管理方法 を読んで適当な nodejs をインストールしてください.

nodejs がインストールされればそれに付随して npm もインストールされますので,ぜひ!


marp コマンドでスライドを作成する

marp-cli をインストールしたら marp コマンドが使えるようになっているはずです.

marp コマンドがインストールされているかどうかは $ which marp など実行すればわかります.

ちなみに筆者の環境 (MacOS 10.15.7) では以下の通りでした.

$ which marp
/usr/local/bin/marp

marp コマンドの基本的な文法

ということで早速 marp コマンドを実行してみましょう.

基本的な文法は $ marp /path/to/example.md です.

$ marp /path/to/example.md

このコマンドを実行すると /path/to/example.md と同じディレクトリに /path/to/example.pdf が生成されます.

続いて,marp コマンドのオプションについてみてみましょう.


marp コマンドのテーマオプション設定

marp コマンドで主に筆者が使っているオプションは次の3つです.

  • --pdf pdf を生成することを明示的に宣言する
  • --preview プレビューを表示する
  • --theme /path/to/theme.css テーマを指定する

これらのオプションを使った marp コマンドは例えばこんな感じ.

$ marp \
--pdf \
--preview \
--theme /path/to/theme.css \
/path/to/example.md

/path/to/theme.css は .zshrc に定義しておくと良い

自作テーマへのパスをいちいち書くのは面倒くさいので, .zshrc などに環境変数を定義しておくと良いかなと思います.

例えば,筆者は以下の文を .zshrc に書いています.

# --------------------------------------------
# Marp mytheme
# --------------------------------------------
MARP_THEME_TYPEMEMO="$HOME/typememo/tools/res/marp_theme_typememo.css"

やっぱり環境変数を定義しておくと,とても便利ですねー.


おわりに

marp-cli を使うとめっちゃ便利だぞ,という筆者の思いは伝わりましたでしょうか?

marp の自作テーマが適用できずに悶々している人がこの記事を読んで,すっきりすることを祈っています.

marp は本当に便利ですねー.

最後までお読みいただきありがとうございました.

山田武尊を応援していただけるととても嬉しいです!


愛用品