7.4 コードブロックをスクロール可能にする (*)

大量のコードやテキスト出力を HTML ページに表示するとき, 表示範囲の高さを制限したほうがよいでしょう. そうしないとページはとてつもなく長くなり, コードやテキストの出力を細かく読む気のない人が読み飛ばしづらくなります. この問題の解決法は複数あります. 一つは, html_document フォーマットの code_folding オプションを使います. このオプションは文書のコードブロックを折りたたんで出力し, 読者はボタンを押して折りたたみを展開することができます (詳細は7.5節).

他の解決法としては, コードブロックが長すぎるとき, 高さを固定しスクロール可能にすることです. これは CSS プロパティの max-height と overflow-y で実現できます. 以下はその使用例の全容で, 出力は図7.3になります.

---
title: スクロール可能なコードブロック
output: html_document
---

```{css, echo=FALSE}
pre {
  max-height: 300px;
  overflow-y: auto;
}

pre[class] {
  max-height: 100px;
}
```

コードブロックの高さを制限する CSS ルールをいくつか定義しました. これらのルールがコードブロックとテキスト出力に対して機能するのかテストすることができます.

```{r}
# このチャンクに多くのコードがあるように見せかける
if (1 + 1 == 2) {
  # もちろん真になる
  print(mtcars)
  # 単に長いデータを表示させるだけ
}
```

次に高さを100px に制限するために `scroll-100` という新しいクラスにルールを追加し,  チャンクオプション `class.output` でこのクラスをコードチャンクの出力に追加します.

```{css, echo=FALSE}
.scroll-100 {
  max-height: 100px;
  overflow-y: auto;
  background-color: inherit;
}
```

```{r, class.output="scroll-100"}
print(mtcars)
```

図 7.3: カスタム CSS を使用したスクロール可能なコードブロック

上記の例では全てのコードブロックに大域的に 300px の高さの上限を定義しています. HTML 出力時にはコードブロックが <pre> タグで囲まれていることを思い出してください. それから class 属性を用いて <pre> ブロックの高さを 100px に制限します. これは CSS セレクタ pre[class] が意味するところです. デフォルトではテキスト出力は <pre> </pre> に含まれ, R コードブロックは <pre class="r"> </pre> に含まれます ( <pre> タグが class 属性を持っていることに注意).

２つ目の R コードチャンクからのテキスト出力の高さも 100px です. これは出力に対して, カスタムクラス名 scroll-100 を割り当て, 高さの上限を 100px に定義したためです.

個別のコードブロックに対して異なる最大の高さを指定したいならば, 12.3節の例を見てください.