RMarkdownにhighlight.jsのcssテーマを適用する
RMarkdownにhighlight.jsのcssテーマを適用する
highlight.jsのcssテーマを用いてRMarkdownのコードハイライトを変更する方法を示します。
以下の記事にあるように、RMarkdownはYAML部分のオプションを用いてコード部分のハイライトを変更することができます。設定できるコードハイライトのテーマはdefault,tango,pygments,kate,monochrome,espresso,zenburn,haddock,textmateの9個です。
もっと多くのハイライトテーマを使うには、例えば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のバージョンを使用しています。