対象読者

• Markdownから自動的にHTMLを生成しているがゆえに、コードブロックのインラインコードのスタイリングの切り分けをできずに困っている人
• わざわざpreタグとcodeタグの構造を意識しなくてもいい感じにスタイリングを切り分けたい人

どういった場面で発生するか

MarkdownからHTMLを自動生成してくれるJavaScriptライブラリはいくつか存在しています。例えばremarkやreact-markdown、markedといったものがあげられます。

それぞれのライブラリで挙動に違いはあると思いますが、基本的にコードブロックとインラインコードの入出力は下記のようになると思います。

コードブロック

入力(Markdown)

```
console.log('Hello World!')
```

出力(HTML)

<pre>
  <code>
    console.log('Hello World!)
  </code>
</pre>

インラインコード

入力(Markdown)

`console.log('Hello World!')`

出力(HTML)

<code>console.log('Hello World!)</code>

preタグとcodeタグのCSSの設定に困る

preタグにはコードブロックとしてのスタイルを、codeタグにはインラインコードのスタイルを与えようとして、下記のようにCSSを設定したとします。

pre {
  background: black;
}
code {
  background: light-gray;
}

しかし、こうしてしまうとコードブロックにもcodeタグが使われているため、結果的に、コードブロックとインラインコードのどちらにもbackground: light-grayが適用されてしまいます。

preタグとcodeタグのCSSを切り分ける方法

ではどのように指定すれば良いかというと、下記のようにpreタグの下にあるcodeタグは無視するようにCSSを設定してあげれば良いです。

pre {
  background: black;
}
*:not(pre) code {
  background: light-gray;
}

*:not(pre) codeを言葉で説明をするならば、「preタグを除く全ての要素の配下にあるcodeタグ」という指定になります。

詳しくはMDNを参考にしてみてください。(最近MDNのデザインがカッコ良くなってちょっと嬉しい)

• https://developer.mozilla.org/ja/docs/Web/CSS/Universal_selectors
• https://developer.mozilla.org/ja/docs/Web/CSS/:not

最後に

CSSは無限大なので、今回紹介した方法以外にも回避策はたくさんあると思います。ただ、その中でもこの方法を紹介した理由として、コードブロックにはシンタックスハイライトを導入するためのライブラリを使いたいという人が多いかと思います。

そこで、preタグなどのコードブロックは自動的にスタイリングされてしまいます。そのためcodeタグに着目した回避策を紹介させていただきました。 ぜひ参考にしてみてください。