皆さん、こんにちは。
皆さんは普段スライドを作るのに何を使っていますか？
自分はMarpが好きでよく使っています。
Markdownで手軽にきれいなデザインのスライドを作れるので、見出しだけ書いてアウトラインを考え、そのままスライドを作りこんでいく、みたいな使い方で愛用しています。
ただ、自分はPhpStormなどのJetBrains IDEが大好きで、Marpで作ったスライドのコードブロックをJetBrains IDEのようなシンタックスハイライトにしたくなったんですよね。
ということで、最近作ったスライドではMarpのテーマをカスタマイズしてみました。
普段JetBrains IDEを使っている人にはお馴染みの色使いになっているのではないでしょうか？
このブログでは、どのようにテーマをカスタマイズしているか・そのテーマを簡単に使うための自作リポジトリをご紹介します。
3行まとめ
- このリポジトリにあるテーマ・スクリプトを使うとMarpのテーマGaiaのコードブロックをDarculaのカラーリングに変更できます
- 内部ではMarpでPrismを使ってコードをハイライトするためのプラグインmarkdown-it-prismを使っています
- PrismのDarculaテーマを読み込んでいます
MarpでDarculaのテーマを読み込む方法
コードブロックのテーマをJetBrains IDEのようにしたいと調べていて、この記事に辿り着きました。
Marp CLIを使ってスライドをビルドすれば、JetBrains IDEにデフォルトでインストールされているカラーテーマ「Darcula」を使えるらしいと分かり、大変参考になりました。
(ちなみに、DraculaというカラーテーマもありますがDarculaはそれとは別のカラーテーマです)
Marpのスライドをビルドする方法は
の2種類あり、Marp CLIはMarkdownファイルをスライドに変換するコンバーター (Engine)を拡張可能です。
You can use Marp (and compatible markdown-it) plugins while converting, or completely swap the converter to the other Marpit-based engine which published to npm.
When you specified the path to JavaScript file (.js, .cjs, or .mjs) in --engine option, you may use more customized engine by a JavaScript function.
https://github.com/marp-team/marp-cli?tab=readme-ov-file#functional-engine
markdown-itはMarkdownパーサーで、markdown-itのプラグインはMarpに互換があります。
どうやらMarpはmarkdown-itのパーサーを拡張しているようです。
We have extended several features into markdown-it parser to support writing awesome slides, such as Directives and Slide backgrounds.
Prismというシンタックスハイライト用のツールにはDarculaのテーマがあり、markdown-itでPrismを使うためのプラグインmarkdown-it-prismを読み込むことでMarpからPrismのテーマを使えるようになります。
engine.mjs
import prism from 'markdown-it-prism' export default ({marp}) => marp .use(prism)
marp --engine engine.mjs
ここからは、この基本を踏まえてどのようにテーマを拡張したのか解説していきます。
自作スクリプトでやっていること
0. 最終形
何をしているのか説明する前に、最終的にどのようにスクリプトを使ってスライドを出力するのか、イメージをお伝えしておきます。
cd スライドのmdファイルがあるディレクトリ # PDF出力 mymarp # 「mymarp pdf」でも可 (PDF出力がデフォルト) # HTML出力 # mymarp html
PATHが通っていてどこからも実行可能なスクリプトを設置し、それをスライドがある任意のディレクトリで実行するイメージです。
では、このスクリプトがやっていることを1つ1つ分解して見てみましょう。
1. Darculaの読み込み
まず、大本命であるDarculaテーマの読み込みです。
Darculaテーマを読み込む方法は
だけです。
package.json
{ "devDependencies": { "@marp-team/marp-cli": "^4.1.1" }, "dependencies": { "markdown-it-prism": "^2.3.0" }, "scripts": { "marp": "marp" } }
engine.mjs
import prism from 'markdown-it-prism' export default ({marp}) => marp .use(prism)
themes/gaia-darcula.css
/* @theme gaia-darcula */ @import 'gaia'; @import url('https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-darcula.min.css');
Markdownファイルで上記カスタムテーマ名「gaia-darcula」の使用を宣言し、Marp CLIでビルドすることでDarculaのテーマがコードブロックに適用されます。
npm run marp -- --engine engine.mjs --theme-set themes --pdf slide.md
この内、コマンドラインオプションに関わらず共通で指定されて欲しいオプション--engineと--theme-setは設定ファイル.marprc.ymlで指定するようにしました。
engine: engine.mjs themeSet: themes
現時点でのコマンドは以下のようになります。
npm run marp -- --pdf slide.md
2. コードブロックの背景色を変更
これでコードはDarculaのテーマで描画されるようになりましたが、Gaiaの背景色が残ってしまっています。
そのため、一度HTMLで出力したスライドをブラウザの開発者ツールで確認し、背景色を調整しています。
/* @theme gaia-darcula */ @import 'gaia'; @import url('https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-darcula.min.css'); pre:is(marp-pre) { background: transparent; } pre:is(marp-pre) code { background: #2b2b2b; }
ヨシ！
3. 任意のディレクトリで実行できるようにする
普段、自分はスライドを以下のようなディレクトリ構成で管理しています。
スライドを作るたびに.marprc.ymlなどをコピーするのは手間なのと多重管理になってしまうので、Marpカスタマイズ用のファイルを格納したディレクトリは1箇所にし、そこにあるファイルを使って任意のスライド用ディレクトリでスライドを生成できるようにしたいと考えました。
- Marpカスタマイズ用ディレクトリ
ここのbin/mymarpを各所で使うイメージです。
一番シンプルなのは
cd Marpカスタマイズ用ディレクトリ && npm run marp -- --pdf slide.md
とする方法です。
しかし、cdでディレクトリを移動してしまうとslide.md内に相対パスで指定している画像ファイルを読み込めなくなってしまいました。
どうしたものかとドキュメントを確認した所、--input-dirを指定すればMarkdownファイルやCSSファイルを探索する基準のディレクトリを変更できそうと分かりました。
--input-dirを指定する場合は変換対象のmarkdownファイルをコマンドライン引数で渡せなくなり、代わりに指定したディレクトリ以下の全てのmdファイルが変換されるようになります。
また、セキュリティによりローカルにあるファイルの読み込みはブロックされてしまうため、--allow-local-filesオプションの指定も追加しました。
Because of the security reason, conversion that is using the browser cannot use local files by default.
Marp CLI would output incomplete result with warning if the blocked local file accessing is detected. We recommend uploading your assets to online.
If you really need to use local files in these conversion, --allow-local-files option helps to find your local files. Please use only to the trusted Markdown because there is a potential security risk.
Marpカスタマイズ用ディレクトリへの移動も組み合わせると以下のようなコマンドになります。
input_dir=$(pwd) cd $(dirname $0)/../ && npm run marp -- --allow-local-files --pdf --input-dir $input_dir
これで大枠は完成です。
4. 細々とした開発体験向上
最後に、快適にスライドを作成できるようにするための細々とした調整を加えています。
mdファイルを変更する毎にビルドコマンドを叩かなくて済むよう、--watchオプションでホットリロードを有効にしました。
(ちなみに、--previewオプションをつけるとプレビュー用のウィンドウが立ち上がるのですが、普段使っているブラウザのタブでスライドを確認したいと思ったためこのオプションは使っていません)
また、表示の調整用にHTMLで出力したくなる場面もちょくちょく発生したため、サブコマンドで出力形式を可変できるようにしました。
完成形は以下のような形になります。
#!/bin/bash
input_dir=$(pwd)
case $1 in
html)
output_format="--html"
;;
pdf)
output_format="--pdf"
;;
*)
output_format="--pdf"
;;
esac
cd $(dirname $0)/../ && npm run marp -- --allow-local-files --watch $output_format --input-dir $input_dir
このスクリプトをどこからも使えるようにPATHを通し、スライドがあるディレクトリでmymarpと実行するだけでカスタマイズしたテーマのスライドが出力されるようになりました 🙌
注記
このコマンド、一応HTMLでもほとんど問題なく動くことは確認していますが、PDFとHTMLだと微妙に出力結果が違います。
フォントとかpaddingとかはそこまで大きな差異ではないのですが、コードブロックでtxtやbashを指定した時の文字がちょっと見づらくなってるのが気になっています。
とは思うものの、「HTMLはあくまで表示の調整確認に使うだけだし、発表時に使う想定のPDFはまあ大丈夫かな・・・？」と一旦保留してます。
HTML出力のスライドをメインで使う方はご注意ください。
また、Gaia以外のテーマは未確認です。
まとめ
このようにしてMarpのテーマをカスタマイズしてコードブロックのシンタックスハイライトをJetBrains IDEぽくしました。
見慣れた色使いになってとっっっても満足しています。
ただ、Marp CLIを使い始めたのは今回が初めてなのでこの方法がBestなのかよく分かっていないのが正直な所でもあります。
もし他に良いやり方をご存じの方がいらっしゃいましたら、教えて頂けると嬉しいです。
以上、だいぶ長い記事になってしまいましたがお読み頂きありがとうございました。
