Marp for VSCodeで独自CSSが効かない場合の対応（marp-cli）

社労士として活動をしていると、研修やセミナーの依頼を受けることが多々ありますが「スライドはPowerPointでお願いします」と言われることが多いです。

もちろん、そのようなPowerPoint縛りの場合は仕方ありませんが、自主開催のセミナーなど自由に選択できる場合は、Markdownで作成できる「Marp」がお気に入りです。

Marpとは、Markdown形式のテキストファイルからそのままスライド資料を作成できるOSS（オープンソースソフトウェア）のツールです。

Markdownであればテキスト形式のファイルであり、簡単・手軽、そして検索可能、またGitによるバージョン管理が可能ですから。就業規則の説明会資料や、顧問先向けの研修資料をMarkdownで管理できれば、過去に作った資料の使い回しも簡単ですし、修正履歴も追いやすくなります。

Marpの基本テーマと独自CSSの設定方法

Marpには最初から用意されているテーマとして、default、gaia、uncoverの3つがあります。

テーマを適用する場合は、以下のようにtheme: XXXの部分に追加するだけです。ちなみに、何も設定をしなければ、defaultが適用されます。

---
marp: true
theme: gaia
paginate: true
footer: "© あべ社労士事務所"

---

default（何も設定しない場合）

gaia

uncover

独自CSSの適用

3つの既存のテーマでも十分ですが、独自のデザインにしたいときもあります。

その場合は、CSSを自作し適用することになりますが、自作したCSSを適用するためにはVSCodeのsettings.jsonに追記が必要です。

具体的な方法は以下のとおり。

1. VS Codeの「Code -> Preferences -> Settings」で、設定画面（Settings）を開く。Macの場合は⌘（Command） + ,（コンマ）
2. 検索窓にmarkdown.marp.themesと入力する。
3. 「Add Item」ボタンを押し、適用するCSSファイルの場所（今回は./marp-themes/test.css）を指定すれば完了。

作成した自作テーマtest.cssを適用する場合は、以下のようにtheme: testと記載します。

---
marp: true
theme: test
---

defaultのテーマをベースに、見出しの部分を緑、フッターを中央揃えにしただけですが、以下のようにちゃんと自作テーマ（test.css）が適用されていることがわかります。簡単です。

ただ、Marp for VSCodeでいくら設定しても独自CSSが効かない場合があります。

settings.jsonにちゃんと書いたのに、なんで反映されないんですか？

実は私も色々調べたのですが、はっきりした原因は特定できませんでした。Marp for VSCodeのプレビュー機能には、キャッシュや読み込みタイミングの問題があるようです。こういうときは、原因究明に時間をかけるより、潔く別の方法に切り替えたほうが早いです。

Marp for VSCodeで独自CSSが効かない場合はmarp-cli

色々調べても原因がわからなかったので「marp-cli」を用いることにしました。ちなみに、CLIとは、Command Line Interface（コマンドラインインターフェース）の略です。

インストールが完了した後は、以下を実行すればプレビュー画面が出ます。

$ marp --preview --theme ./marp-themes/mystyle.css test.md

以下はプレビュー画面

コマンドを補足しておくと、

• --preview：プレビュー画面の表示
• --theme ./marp-themes/mystyle.css：適用するCSSの部分
• test.md：marpを実行するファイル

言葉で表現すると、

• テーマはmarp-themesフォルダにあるmystyle.cssを適用して
• test.mdをプレビューで表示して

ということです。

あとは、Markdown形式でテキストを書いていけば、リアルタイムでスライド資料が変更されていきます。

marp-cliでPDFを作成する方法

marp-cliに慣れてくると、そのままPDFを作成したくなります。

その場合は、以下のように--pdf（ハイフン「-」は2つであることに注意）とすればPDFを作成できます。

$ marp --pdf slide-deck.md

またコマンドに-o（ハイフン「-」は1つ）を加えることで、出力するPDFのファイル名を指定することもできます。

$ marp slide-deck.md -o converted.pdf

画像を参照している場合の注意点

画像ファイル（pngやjpgファイル）を参照してMarpファイルを作っている場合には注意が必要です。デフォルトのままではPDF化しても、画像が含まれないのです。

公式サイトで以下のように解説されていますが、セキュリティ上の理由とのことです。

Security about local files

Because of the security reason, PDF, PPTX and image(s) conversion cannot use local files by default.

Marp CLI would output incompleted result with warning if the blocked local file accessing is detected. We recommend uploading your assets to online.

オンライン上にアップロードすることが推奨されていますが、ローカルファイルのまま画像を埋め込みたい場合は、--allow-local-filesを加えてください。allowの前のハイフン「-」は2つです。

$ marp --pdf --allow-local-files slide-deck.md

環境が整ったら、あとは見た目を整えるだけです。本文の配置やヘッダー・フッターのデザインなど、具体的なCSSの調整方法は以下で紹介しています。

関連：Marpの本文を中央から上詰めに変更する方法

でも、これって結局は自分用のセミナー資料の話ですよね？ 顧問先向けの仕事でも使えるんですか？

もちろんです。例えば就業規則の説明会資料や、法改正のポイントをまとめた研修資料は、毎回内容を微修正しながら使い回すことが多いですよね。PowerPointだと差分管理がしづらいのですが、MarpならMarkdownのままGitで版管理できるので「過去の資料をベースに一部だけ更新する」といった作業がとてもやりやすいんです。PDF化してそのまま顧問先にお渡しすることもできますし。

まとめ

Marpでの資料作成について、ここまでの流れを整理すると以下のとおりです。

• 既存のテーマ（default／gaia／uncover）でも十分だが、独自のデザインにしたい場合はCSSを自作して適用できる
• 独自CSSはMarp for VSCodeの設定（settings.json）で適用できるが、まれに反映されないことがある
• 反映されない場合は、marp-cliに切り替えれば解決する
• marp-cliなら、プレビューだけでなくPDF化まで1つのコマンドで完結する
• 画像を埋め込んでPDF化する場合は、--allow-local-filesを忘れずに付ける

一度テーマとCSSを整えてしまえば、あとはMarkdownで書くだけ。テキスト管理ができるのが、Marpを使い続けている一番の理由です。

「楽をするために徹底的に努力する」——面倒な初期設定さえ乗り越えてしまえば、あとは「ほどほど」に使い続けられる。これもまた、一人社労士の「ほどほど」経営を支える小さな工夫のひとつです。