【Marp】スライドの見出しの一部分にだけ色をつけたい場合の対処法

こんにちは。Marp芸人の影織です。

※Marpって何?って人はこちらからどうぞ

今日は、Marpで、見出しの一部分にだけ色をつけたい場合の対処法を書きます。


手順


例として、スライドを一枚用意してみました。
この「ここにタイトル」という題名の、「タイトル」という部分だけ色を変えたいとしましょう。

Marpで作ったスライドの見出しの一部分にだけ色をつけたい場合の対処法


最初に思いつくのは<span>タグを当てることですね。

<span style="color:green;">タイトル</span>
のように変えてみました。

が、タグがそのまま文字列で表示されてしまいます。

Marpで作ったスライドの見出しの一部分にだけ色をつけたい場合の対処法
ありゃ。


ここで、command + ,(カンマ)を叩いてSetting画面を開きます。
検索窓に marp htmlと入れて、
Enable HTMLにチェックを入れましょう

Marp設定画面


無事に先ほどのspanタグが反映されました!

Marpで作ったスライドの見出しの一部分にだけ色をつけたい場合の対処法



解説

VSCodeのMarp拡張では、セキュリティの都合で、HTMLタグの使用がデフォルトで制限されているみたいです。



まとめ

MarpでHTML編集できるようにするためには、設定でEnable HTMLにしましょう。
これでよりリッチなスライドが作れますね!やったー!



参考