R MarkdownでHTML出力時に見出しのURLを簡単に取得できるようにした

by
カテゴリ:
タグ:

このブログでも使えてます。

ここにマウスを重ねると

#記号が見出しの最後に現れ、クリックするとブラウザのURL覧から見出しのURLを取得できるようにしました（PR #1884）。 #記号を右クリックしてメニューからCopy link locationとかしてもOK。

多分来月くらいにリリースされるrmarkdown 2.5の機能になります。早速使いたい人はGitHub版をインストールしましょう。

html_documentとその派生型で利用などで利用でき、デフォルトで有効です。つまり、bookdown::html_document2やblogdown::html_pagedなどでも利用可能。無効にする場合はYAMLフロントマターで以下のように指定します。

output:
  html_document:
    anchor_sections: false

JavaScriptとCSSで実装していて、#以外の文字を利用することもできます。

URL取得用の文字を変える

↑の見出しにマウスを重ねると#の代わりに⫘が出現します。これには以下のようにCSSを指定します。 contentの内容を変えるだけなので簡単ですね。

a.anchor-section::before {content: '⫘';}

R MarkdownなのでCSSチャンクを使うととってもカンタンです。

```{css, echo=FALSE}
a.anchor-section::before {content: '⫘';}
```

URL取得用の文字を画像に変える

↑の見出しにマウスを重ねると#の代わりにatusyが出現します。これには以下のようにCSSを記述します。やや複雑ですね。

a.anchor-section::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(https://blog.atusy.net/images/atusy.jpg) no-repeat;
  background-size: contain;
  background-position: left bottom;
}

先の例でcontentの内容を別の文字列にしたように、contentに画像を指定することも可能です。しかし、画像のサイズを指定するためには、画像を背景として挿入してやる必要があります。

Enjoy!