【Marp】強調する文字のスタイルをカスタマイズしたい

Markdownで記法でスライドを作成できるVS Codeの拡張機能「Marp」について、日常的にぶつかった課題を解決して記していきます！

今回は、強調したい文字のスタイルの変更についてです。
（Marpについては過去記事にまとめています。）

briboo-pc.hatenablog.jp

完成イメージ

こんな強調ができるように目指します。

強調をカスタマイズしたイメージ

強調ではなく色を変えたいだけなら、次の記事がおすすめです。

briboo-pc.hatenablog.jp

想定環境

• Windows11
• VS Code
• TeX Live 2023

前提

MarkdownファイルにCSSを適用させていない場合は、過去記事を参照してください。

briboo-pc.hatenablog.jp

方法

Markdownファイルの編集

強調文字を記す方法は種類があります。

1. **強調したい**
2. <strong>強調したい</strong>
3. <b>強調したい</b>

1. はMarkdownの強調、2. はHTMLの強調、3. はHTMLの太字です。デフォルトでは見た目はどれも同じ太字（bold）です。

基本的には、「Ctrl」+「B」のショートカットが対応している「1．**強調したい**」の書式を用いれば良いと思います。

！

この後CSSを適用させますが、**はstrongタグで指定できます（本記事のキモ）。しかし、bタグについてはもちろん異なるため、CSSでstrongタグとbタグの両方を指定するか、**しか使わない、といった工夫が必要そうです。
（逆手に取れば、<b>と<strong>でそれぞれCSSを設定すれば２パターンの書式ができますが...）

よって，Markwdownファイルには次のように記載しておきます。

これは**強調したい文字**なのです。

CSSの編集とサンプル例

それでは、いよいよスタイルを変更していきましょう。いくつかサンプルを載せておきます。CSSのスタイルについて詳しくはググると大量に出てきます（本記事の主旨は既にほぼ書き終わりました）。

なお、本記事ではstrongタグとbタグ両方に適用するコードにしています。

Point

Marpでは、CSSを更新しても直ちには反映されません。CSSを保存すると直ちにプレビューに反映されます。

文字色

strong,b {
  color: red;
}

赤字を適用

背景色

strong,b {
  background-color: rgb(255, 220, 0);
}

黄色の背景色を適用

上下線

strong,b {
  border-top: 2px dashed #ff20a4;
  border-bottom: 2px dashed #ff20a4;
}

上下赤破線を適用

マーカー

strong,b {
  background: linear-gradient(transparent 50%, #ffaaff 50%);
  padding: 0 0.2em;
  margin: 0 0.2em;
}

ピンクのマーカーを適用

組み合わせ

strong,b {
  color: #663300;
  background-color: rgb(255, 220, 0);
  border-bottom: 0.2em solid #ff20a4;
  background: linear-gradient(transparent 50%, #ffaaff 50%);
  font-size: 1.8em;
  padding: 0 0.2em;
  margin: 0 0.2em;
}

色々な適用の組み合わせ

やりすぎ感...？

見やすいデザインに自身のない人はぜひググってください。