RMarkdownにhighlight.jsのcssテーマを適用する

highlight.jsのcssテーマを用いてRMarkdownのコードハイライトを変更する方法を示します。

以下の記事にあるように、RMarkdownはYAML部分のオプションを用いてコード部分のハイライトを変更することができます。設定できるコードハイライトのテーマはdefault,tango,pygments,kate,monochrome,espresso,zenburn,haddock,textmateの9個です。

R Markdownでコードハイライトのテーマ設定

もっと多くのハイライトテーマを使うには、例えばhighlight.jsを用いる方法があります。2021年2月のバージョン10.5.0時点で97パターンあります。

そこで、highlightjs と highlightjs-line-numbers プラグインで Rmarkdown のコードブロックに行番号をつけるを参考にしながら、highlight.jsのcssテーマをRMarkdownのコードハイライトに当てる方法を考えました。

結論としては、以下のコードをRMarkdownのYAML部分の直下（＝本文部分の先頭）に記載します。

<style type="text/css">
@import "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/rainbow.min.css";
</style>

```{css, echo=FALSE}
pre{
  border: transparent;
  background: transparent;
  padding: 0px;
}

/* preのpadding 9.5px + border 1px */
code.hljs{
  padding: 10.5px;
}
```

@importで読み込むhighlight.jsのCDNのアドレスの最後の"rainbow.min.css"の"rainbow"は、highlight.jsのGitHubのリポジトリにある"テーマ名.css"の"テーマ名"です。highlight.jsのdemoで使いたいテーマを見つけたら、このリポジトリからテーマ名を探します。CDNで読み込むときはテーマ名に.minを付けます。

RMarkdownのコードブロックでは、border: 1px, padding: 9.5pxのpreという要素の中に、code.hljsという要素のコード部分が存在します。上のコードの最初の3行（style～/style部分）だけをRMarkdownに書いてcssを変更しないと、code.hljsはテーマの背景に変わっているのに、borderとpaddingはデフォルトのグレーのまま残ってしまいます。highlight.jsのcssはcode.hljsにかかるので、上のようにpreのborderとbackgroundをcode.hljsの透過としてpaddingをいじることで、見た目をうまく調節しています。

なお、上記ではborderをtransparentにしているので、背景が白系のテーマだと、コードとそれ以外のブロックの区別が付きません。その場合はborder: transparent;を削除すると、枠線だけ残ります。

おまけ（フォント変更）

以下を追加することで、RMarkdownのコード部分のフォントをコード用のフォントに変えられます。インラインのコードのフォントも変わります。

```{css, echo=FALSE}
code{
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}
```

RStudioのデフォルトのフォントにする場合は以下です。

```{css, echo=FALSE}
code{
  font-family: Lucida Console, monospace;
}
```

環境

Rは4.0.2、RMarkdownは2.7、highlight.jsは10.5.0のバージョンを使用しています。