R Markdownで生成するhtmlタグ要素のidとclassを確認

諸事情により必要になったので，この際調べることにした。

留意事項

できるだけプレーンなものをチェックしたかったので，基本的なものだけをやっています。なおidやclassはR Markdown上で色々やれば付与させることができますし，Rチャンクの内容によってはその出力のタグが変化することもあります。今回はそのあたりを省いています。

あと，生成されたhtmlは左寄せになってますが，今回は読みやすいように一部で私がインデントつけてます。また，使用したRmdファイルの内容は文末に記しています。

元のRmdと生成されたhtml

heading

見出し要素。h1からh6までを検証:

Rmdコード

# 見出し1

## 見出し2

### 見出し3

#### 見出し4

##### 見出し5

###### 見出し6

html

<div id="1" class="section level1">
  <h1>見出し1</h1>
  <div id="2" class="section level2">
    <h2>見出し2</h2>
    <div id="3" class="section level3">
      <h3>見出し3</h3>
      <div id="4" class="section level4">
        <h4>見出し4</h4>
        <div id="5" class="section level5">
          <h5>見出し5</h5>
          <div id="6" class="section level6">
            <h6>見出し6</h6>
            (中略)
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

見出し要素自体はそのままh要素となっていますが，div要素で覆われるようになり，また自動的にネストされます。このdiv要素にidとclassが付与されます。idはその見出しの文字列が入りますが，半角英数字以外は取り除いてきます。このあたりはR Markdownのデフォルト仕様とPandoc拡張が関係しています。気になる方はこのあたりを参照してください。

また，classとしてsectionと見出しレベルの応じたものが付与されています。このあたりのを活用してRmdのスライドとかタブ機能を実装してたりします。

段落・イタリック・ボールド

Rmdコード

イタリックのテストします。*ひとつめ*。_ふたつめ_。

ボールドのテストします。**ひとつめ**。__ふたつめ__。

html

<p>イタリックのテストします。<em>ひとつめ</em>。<em>ふたつめ</em>。</p>
<p>ボールドのテストします。<strong>ひとつめ</strong>。<strong>ふたつめ</strong>。</p>

そのままですね。

番号なしリスト

いわゆるul>liのリストです。

Rmdコード

- 番号なしリスト1
    - 番号なしリスト1-1
    - 番号なしリスト1-2
- 番号なしリスト2
- 番号なしリスト3
    - 番号なしリスト3-1

html

<ul>
  <li>番号なしリスト1
    <ul>
      <li>番号なしリスト1-1</li>
      <li>番号なしリスト1-2</li>
    </ul></li>
  <li>番号なしリスト2</li>
  <li>番号なしリスト3
    <ul>
      <li>番号なしリスト3-1</li>
    </ul></li>
</ul>

特になし。

番号リスト

Rmdのコード

1. 番号リスト1
    1. 番号リスト下1-1
    2. 番号リスト下1-2
2. 番号リスト2
3. 番号リスト3
    1. 番号リスト下3-1

html

<ol style="list-style-type: decimal">
  <li>番号リスト1
    <ol style="list-style-type: decimal">
      <li>番号リスト下1-1</li>
      <li>番号リスト下1-2</li>
    </ol></li>
  <li>番号リスト2</li>
  <li>番号リスト3
    <ol style="list-style-type: decimal">
      <li>番号リスト下3-1</li>
    </ol></li>
</ol>

自動的にlist-style-type: decimalがol要素に付与されています。これは番号をアラビア数字(1,2,3..)で指定しているためかと思われます。

定義リスト

RStudioのHelpにある"Markdown Quick Reference"には記述されていませんが，R Markdownでも定義リストが使えます。詳しくはこちらの記事を参照してください。

Rmdのコード

定義リスト1

: 定義リスト1の中身

定義リスト2

: 定義リスト2の中身

html

<dl>
  <dt>定義リスト1</dt>
  <dd><p>定義リスト1の中身</p>
  </dd>
  <dt>定義リスト2</dt>
  <dd><p>定義リスト2の中身</p>
  </dd>
</dl>

dl要素で覆われます。ただ，dd要素の中身が自動的にp要素になっていますね。知らなかった。

リンク要素

一応確認。

Rmdコード

[リンク文字](https://kazutan.github.io/kazutanR/)

https://kazutan.github.io/kazutanR/

html

<p><a href="https://kazutan.github.io/kazutanR/">リンク文字</a></p>
<p><a href="https://kazutan.github.io/kazutanR/" class="uri">https://kazutan.github.io/kazutanR/</a></p>

p要素にくくられていますね。

画像

試してみます。

Rmdコード

![](pics/user.png)

html

<div class="figure">
<img src="pics/user.png" />

</div>

img要素にリンクが差し込まれていますが，そのタグをdiv要素で覆っています。またclassにfigureが付与されています。今回画像埋め込みを単独要素となるように記述したために，こういう処理がされたのかも。このあたりちょっと気をつけといたほうがいいかも。

引用

やってみます。

Rmdコード

引用のテスト

> Why are you using SJIS?

html

<p>引用のテスト</p>
<blockquote>
<p>Why are you using SJIS?</p>
</blockquote>

blockquote要素内に，p要素が入ってきています。今回引用が1行ということもあって，こういう感じになっているのだと思います。

コードブロック

通常のMarkdownのコードブロックをテストします。ついでにインラインコードもテストします。

Rmdコード

```
> 1 + 1
``` 

インライン用に`1+1`してみる。

html

<pre><code>&gt; 1 + 1</code></pre>
<p>インライン用に<code>1+1</code>してみる。</p>

コードブロックの場合はpre>codeとなっています。インラインの場合は単にcode要素で差し込まれていますね。

数式

コードブロックと同様にインライン要素についてもあわせてテストします。

Rmdコード

$$
y = x_1 + x_2
$$

インライン数式用に$\mu = 3.44$してみる。

html

<p><span class="math display">\[
y = x_1 + x_2
\]</span></p>
<p>インライン数式用に<span class="math inline">\(\mu = 3.44\)</span>してみる。</p>

色々入ってきています。これはコードハイライトを当てるために加工されていると思われます。ただ，基本はp要素のようですね。

水平線・ページブレイク

一応確認のため。

Rmdコード

***

html

<hr />

そのまんまです。

Markdown形式の表

Markdownでの表の表現方法はいくつかあるのですが，ここではRStudioのHelpにある"Markdown Quick Reference"に記載されている書式で試します。

Rmdファイル

ほげ|ふが
---|---
ほげほげ1|ふがふが1
ほげほげ2|ふがふが2

html

<table>
<thead>
<tr class="header">
<th>ほげ</th>
<th>ふが</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>ほげほげ1</td>
<td>ふがふが1</td>
</tr>
<tr class="even">
<td>ほげほげ2</td>
<td>ふがふが2</td>
</tr>
</tbody>
</table>

試したコードでは表のヘッダー(いわゆる見出し行)とボディ(中身の行)を区別するような書き方をしていたのですが，それぞれthead要素とtbody要素にちゃんと分かれています。そして各行に自動的に奇数・偶数を示すclassが付与されています。これはPandocの仕様なんでしょうけど，知らなかった…。

Rチャンクのコードと通常出力

それでは試します。まずは通常のものから。

Rmdのコード

```{r}
head(iris)
```

html

<pre class="r"><code>head(iris)</code></pre>
<pre><code>##   Sepal.Length Sepal.Width Petal.Length Petal.Width Species
## 1          5.1         3.5          1.4         0.2  setosa
## 2          4.9         3.0          1.4         0.2  setosa
## 3          4.7         3.2          1.3         0.2  setosa
## 4          4.6         3.1          1.5         0.2  setosa
## 5          5.0         3.6          1.4         0.2  setosa
## 6          5.4         3.9          1.7         0.4  setosa</code></pre>

まず，Rのソースコード部分はpre要素>code要素となっていて，Markdownでのコードブロックと同じような扱いになってはいますが，classにrが付与されています。これでコードシンタックスハイライトでRが効くようになっているんだと思います。

そして出力部分については，pre要素>code要素になっています。なのでコードブロックの要素と同じように扱われます。

knitr::kableによる表出力

R Markdownを利用している人なら誰もがお世話になるknitr::kableではどうなるかを試します。

Rmdコード

```{r}
knitr::kable(head(iris))
```

html

<pre class="r"><code>knitr::kable(head(iris))</code></pre>
<table>
<thead>
<tr class="header">
<th align="right">Sepal.Length</th>
<th align="right">Sepal.Width</th>
<th align="right">Petal.Length</th>
<th align="right">Petal.Width</th>
<th align="left">Species</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="right">5.1</td>
<td align="right">3.5</td>
<td align="right">1.4</td>
<td align="right">0.2</td>
<td align="left">setosa</td>
</tr>
<tr class="even">
<td align="right">4.9</td>
<td align="right">3.0</td>
<td align="right">1.4</td>
<td align="right">0.2</td>
<td align="left">setosa</td>
(中略)
<tr class="even">
<td align="right">5.4</td>
<td align="right">3.9</td>
<td align="right">1.7</td>
<td align="right">0.4</td>
<td align="left">setosa</td>
</tr>
</tbody>
</table>

Rのコード部分は一つ前の分と変わりません。Markdown記法で表現した表とknitr::kableで出力した表での違いとしては，各セル(td要素)にalign属性が付与されている点です。これはknitr::kableは列の要素を見て，「数値なら右揃え，文字列なら左揃え」というルールを自動で割り当てる機能があるからです。詳しくはこの関数のヘルプを参照してください。

plotの出力

Rチャンクで実行して出力されたplotを検討します。

Rmdコード

```{r}
plot(1:10)
```

html

<pre class="r"><code>plot(1:10)</code></pre>
<p><img src="selector_check_files/figure-html/unnamed-chunk-3-1.png" width="672" /></p>

Rのコード部分は前の分と同一です。出力はpngファイルとして出力され，それをimg要素で組み込み，それをp要素で覆っています。この素のままだと他の画像挿入用img要素とまざってcssで指定しづらいかも(てか以前そうなった)…。

まとめ

思ったよりも素直なhtmlが返ってきてました。個人的には以下のところに気をつけたいです:

• headingがdiv要素に覆われ，idもclassも自動付与される
• 番号リストはタグ内でstlyeが指定される
• md記法で差し込んだ画像はdiv.figure>imgという構造
• 表には自動で奇数行・偶数行を識別するclassが付与されている
• Rチャンクのコード部分はpre.r要素で覆われる
• Rチャンクで生成したplot画像はp>imgという構造

これだけ抑えておけば，ある程度自分好みのスタイルを適用できるようになるのではないでしょうか。カスタムcssを設定していく方は参考にしてみてください。

Enjoy!

使用したRmdファイル

以下のとおりです:

---
title: "セレクタの確認用"
output:
  html_document:
    self_contained: false
---

ということで，セレクタの確認するため一通り試してみる

# 見出し1

## 見出し2

### 見出し3

#### 見出し4

##### 見出し5

###### 見出し6

イタリックのテストします。*ひとつめ*。_ふたつめ_。

ボールドのテストします。**ひとつめ**。__ふたつめ__。

- 番号なしリスト1
    - 番号なしリスト1-1
    - 番号なしリスト1-2
- 番号なしリスト2
- 番号なしリスト3
    - 番号なしリスト3-1

1. 番号リスト1
    1. 番号リスト下1-1
    2. 番号リスト下1-2
2. 番号リスト2
3. 番号リスト3
    1. 番号リスト下3-1

定義リスト1

: 定義リスト1の中身

定義リスト2

: 定義リスト2の中身

[リンク文字](https://kazutan.github.io/kazutanR/)

https://kazutan.github.io/kazutanR/

![](pics/user.png)

引用のテスト

> Why are you using SJIS?

コードブロックのテスト。

```
> 1 + 1
```

インライン用に`1+1`してみる。

数式:

$$
y = x_1 + x_2
$$

インライン数式用に$\mu = 3.44$してみる。

水平線・ページブレイク

***

Markdownの表

ほげ|ふが
---|---
ほげほげ1|ふがふが1
ほげほげ2|ふがふが2

Rチャンクのテスト。まずは通常の。

```{r}
head(iris)
```

次は`knitr::kable()`。

```{r}
knitr::kable(head(iris))
```

plotのテスト。

```{r}
plot(1:10)
```