R Markdownで作るベタなプレゼン資料

zombie, uncorrelated

2023/07/08

はじめに

オープンソースの開発ツールのユーザーがプレゼンの道具に求めること

  1. 数式とグラフを効率よく埋め込める
  2. 常用するプログラミング言語と連携させて定型処理
  3. 様々な端末からブラウザーで閲覧できるHTML
  4. 見栄えがよく無駄にぐりぐり動かせる

(1)と(2)を実現したR Markdownで、(3)と(4)を達成したい

R Markdownとは何か?

  • テキスト形式で見出しやリンクなどが簡単に記述できるSNSなどで人気のMarkdown記法
  • Markdown記法のファイル(.md)をhtml/PDF/ppt/odtに変化する文書作成ツールのPandoc
  • Pandocの設定値の管理やプログラムのコードの実行と結果表示などのための文法を追加したのがR Markdown
  • 箇条書きやファイルの埋め込みなどMarkdown記法で簡単なことは簡単にできる
  • R(or Rcpp/Python/Julia)で簡単なことは簡単にできる

R Markdownの動作

  • R Markdown形式(.Rmd)をKnitrパッケージで.mdに変換
  • YAMLフロントマターのoutput:以下に応じてパラメーターをつけてPandocを呼ぶ
  • Pandocが.md(と.mdが参照しているファイル)からhtml/pdf/docx/odtを作成
  • html出力時は、html/JavaScriptのフレームワークが利用可

R Markdown Format for reveal.js Presentations

  • HTMLプレゼン作成フレームワークreveal.js
    • 画面サイズに対してスケーラブルな表示で、ケータイでの閲覧も可
    • H1タグ(i.e. #)とH2タグ(i.e. ##)ごとになるスライドを、右下の十字ボタンなどで直線的にではなく平面的に推移
    • reveal.jsの閲覧操作の詳細は ? を押すと確認できる
  • R Markdown Format for reveal.js Presentationsは、reveal.jsを組み込んだhtmlファイルを生成するR Markdownの拡張
  • 便利な拡張なのに人気がイマイチなので、利用時に気づいたことを述べて紹介としたい

表示のカスタマイズ

R Markdown Format for reveal.js Presentationsの利用をYAMLフロントマターで指定したあと、お好みで

  • 全体の表示を調整
    • YAMLフロントマターでオプションを指定
    • CSSの設定を変更
    • 最初と最後に読み込むhtml部品ファイルにhtmlを書く
  • 局所的に表示を調整
    • CSSのクラスを作成・見出しの属性で指定
    • htmlを書く

する。必須ではない。

YAMLフロントマター

YAMLフロントマターで色々指定できる。もちろんrevealjs::revealjs_presentationの指定は必須。

output:
    revealjs::revealjs_presentation:
        theme: moon
        highlight: tango
        center: true
        css: styles.css

CSSファイル(e.g. styles.css)も指定できる。なお、Rmdファイルと同じフォルダーに置かないと、CSSで指定した画像ファイルをself-containedできない模様。

theme

  • 全体の表示を変える
  • 変化がはっきりわかるので、試して把握
  • black, white, league, beige, sky, night, serif, simple, solarized, blood, moon
  • このスライドはsolarized
  • 新たなテーマを作ることもできる

highlight

  • リンク色などを変える
  • 変化は微妙
  • default, tango, pygments, kate, monochrome, espresso, zenburn, haddock, breezedark
  • このスライドはtango

center

  • 左右ではなく上下で中央に配置するオプション
  • なぜデフォルトでFALSE指定なのかが謎

Incremental Bullets

  • 一行一行表示する連打癖のある人には無理なオプション
  • YAMLフロントマターでincremental: trueを指定
  • オン/オフ指定ができる
  • … で一時停止
::: incremental
- incremental節は一行一行表示
:::

::: nonincremental
- nonincremental節はまとめて表示
:::

スライド番号

slideNumber=TRUEで、右下に小さく番号が入る。よく使いそうだがオプション。

output:
    revealjs::revealjs_presentation:
        reveal_options:
            slideNumber: true

メニュー/検索/スライドに書き込み

self_cotainedを犠牲に、標準プラグインでできる。

output:
    self_cotained: false
    revealjs::revealjs_presentation:
        reveal_plugins: ["search", "menu", "chalkboard"]

searchはmやoなどのアルファベットが入ると検索できないので、後述するオーバービューでCTRL+Fで検索した方が確実。

CSSファイルの作成

  • YAMLフロントマターでcssファイルを指定
  • cssの上書き(e.g. h1.title)
  • 新規クラスの作成(e.g. section.smaller)
  • hタグに属性をつける(e.g. # 見出し{.smaller})

タイトル文字を小さめにする

  • 例としてタイトル文字を小さめにする
  • スケーラブルな環境なので、サイズ指定の単位は%(親要素の値との比), vw(表示画面横サイズの1/100), vh(〃縦〃), vmin(=min(vw, vh)), vmax(=max(vw, vh))が無難
  • h2.authorとh3.dateの変更だけで用が足りる可能性大
h1.title {
    font-size: 150%;
    color: blue;
}

スライド本文を左寄せにする

  • アスペルガー症候群気味のあなたに
  • CSSファイルに以下を記述
section.slide {
    text-align: left;
}

section.slide h1, section.slide h2 {
    text-align: center;
}
  • 見出しは中央にしておく

blockquoteを幅広にする

  • 背景色も変えて、スクロール表示するようにする
  • CSSファイルに以下を記述
section.slide blockquote {
    text-align: left;
    overflow:auto;
    width: 90%;
    background-color: rgba(255, 255, 255, 0.4);
}

```{r}の背景色

  • ```{r}で…をくくったときの色合いが気に入らないので調整する
section.slide blockquote, pre {
    text-align: left;
    overflow: auto;
    width: 90%;
    background-color: rgba(255, 255, 255, 0.4);
}

div.sourceCode {
    background-color: rgba(255, 255, 255, 0.4);
    border: 10px sold black;
}

表紙に画像をつける①

  • reveal.jsは表紙に画像がつけられる
    • html内の最初の<section>タグに属性を追加
  • R Markdown Format for reveal.js Presentationsは設定不能の模様
  • Pandocが生成したhtmlファイルを書き換えればOK
    • テキストエディタで編集は煩雑
    • Rを使って正規表現で置換(速度的にsedなどを使う方がよい)
  • 外部ファイル参照で、html内に画像データは保持されない

表紙に画像をつける②

example.Rmdの表紙の背景画像にcover.jpgを指定する例

library(rmarkdown)

input <-"example.Rmd" 
output <- "example.html"
bgimg <- "cover.png"
intermediate <- sub("\\.[^.]*$", ".temp.html", input)

render(input, run_pandoc=TRUE, output_file=output)

file.rename(output, intermediate)

# localeがutf-8ではない古い処理系のRでテキストとして処理すると未対応文字が消えるので、バイナリ処理
# なおSys.setlocale("LC_ALL", "C")で処理後、Sys.setlocale("LC_ALL", "Japanese"))でも誤魔化せる

binreplace <- function(input, output, pattern, replacement, 
    maximum=1, buffsize=1024*1024*5, skip=0){ # 5MBを一気読み

    istream <- file(input, "rb")
    ostream <- file(output, "wb")

    v <- readBin(istream, "raw", buffsize) 

    if(0<skip){
        writeBin(v[1:skip], ostream)
        v <- v[-c(1:skip)]
    }

    # raw型のvを連結してcharacter型のjvにする
    jv <- paste(v, collapse="")
    jps <- paste(pattern, collapse="")
    jrs <- paste(replacement, collapse="")

    # jvを置換してrvをつくる
    rs <- sub(jps, jrs, jv)

    # jvを2文字づつ切り出し、hexmode型→raw型と変換してバイナリ出力する
    writeBin(as.raw(as.hexmode(
        sapply(seq(1, nchar(rs), 2), function(i){
            substr(rs, i, i + 1)
        })
    )), ostream)

    close(ostream)
    close(istream)
}

binreplace(intermediate, output, 
    charToRaw("<section"), # 検索文字列
    charToRaw(sprintf("<section data-background='url(%s)' data-background-size='cover'", bgimg)) # 置換文字列
)

ヘッダーをつける①

影が薄くて名前を覚えてもらえないあなたに!

  • YAMLフロントマターにincludes:after_bodyオプションでhtml部品ファイルを指定する
  • html部品ファイルにcssのidかclassを指定したdivタグを並べる
  • CSSのpositionとtop/right/bottom/leftを駆使して表示調整
  • なお、画像ファイルのデータは生成ファイルに組み込まれる

ヘッダーをつける②

YAMLフロントマターにオプション追加

output:
    revealjs::revealjs_presentation:
        includes:
            after_body: doc_suffix.html

ヘッダーをつける③

html部品ファイル(i.e. doc_suffix.html)にcssのidかclassを指定したdivタグを並べる

<div class="suffix_words">
<div class="suffix_inner">

<!-- 表示する情報 -->

</div></div>
<div class="suffix_image"></div>

ヘッダーをつける④

CSSのpositionとtop/right/bottom/leftを駆使して表示調整

div.suffix_words {
    position: fixed; top: 0; right: 7vmin;
    height: 7vmin;
}

div.suffix_inner {
    position: relative; top: 3vmin; right: 1vmin;
    font-size: 2vmin;
}

次ページに続く

ヘッダーをつける⑤

続き

div.suffix_image {
    position: fixed; top: 0; right: 0;
    width: 7vmin; height: 7vmin;
    background-image: url(icon.png);
    background-size: 7vmin 7vmin;
}

icon.pngは縦横同じサイズの透過色のある画像

背景画像を設定する

背景画像自体は簡単に設定できるが、文字色の調整も必要

## 背景画像を設定する{
.cat_feeling_terrible
data-background=url(cat_feeling_terrible.jpg)
data-background-size=cover}

見出しに属性をセットして、CSSファイルに追記

h1.cat_feeling_terrible, h2.cat_feeling_terrible, .cat_feeling_terrible {
    color: white; text-shadow: 0 0 3px black;
}

section.cat_feeling_terrible pre {
    background-color: white; color: black; text-shadow: none;
}

やらない方が無難。なお、sectionタグの属性で画像ファイル名を指定するためか、画像ファイルの埋め込みはできなかった。

見出し

  • Markdown記法通りに入力できる
  • H1タグ(i.e. #)とH2タグ(i.e. ##)ごとにスライドをつくる
  • H1タグに続くH2タグが紐付けされ、平面的な構造を持つ(いますぐoボタンを押せ!)
  • H3(i.e. ###)とH4(i.e. ####)も使えるが、別のスライドにはならない
  • 見出しの日本語以外の英数字の部分がかぶると(そのままでは)画面遷移が正常に行なえなくなる

見出しがかぶった場合の対処法

  • #idの付与で回避可能
## headline {#id_for_headline}
  • Pandocのオプションを変更する(効果未確認)
pandoc_args: [
  '--from', 'markdown+autolink_bare_uris+tex_math_single_backslash-implicit_figures'
]

太字、斜体、取り消し線

  • Markdown 記法の通り、太字(**で挟む)、イタリック(*で挟む)、取り消し線(~~で挟む)が使える。
*Annals of Eugenics*は、**1954年**に*Annals of Human Genetics*に
名称変更し~~ている~~た。

Annals of Eugenicsは、1954年Annals of Human Geneticsに 名称変更しているた。

箇条書き

  • 順序なしと順序付きがある
  • 入れ籠構造可能(細目はスペースを順序なしで2つ、順序ありで3つ入れる)

順序なし

  • タイプライター時代から使われている表記方法だとか
- Sir Ronald Aylmer Fisher
- Jerzy Neyman
- Edgar Shannon Anderson
  • Sir Ronald Aylmer Fisher
  • Jerzy Neyman
  • Edgar Shannon Anderson

順序付き

  • 数字は何でもよい
1. Sir Francis Galton
1. Karl Pearson
    1. Egon Sharpe Pearson
1. Sir Francis Galton
  1. Sir Francis Galton
  2. Karl Pearson
    1. Egon Sharpe Pearson
  3. Sir Francis Galton

TeX形式の数式の入力

  • R Markdown文書とまったく同様
  • 実際はPandocがMathJax/MathML/WebTeX/KaTeXのどれかを使うように処理している

インライン

$x^2$と$で挟むとインラインで\(x^2\)と表示できる。 $x=`r sum(1:10)`$とインラインコードを数式内に挿入すると、\(x=55\)と計算され表示される。

ブロック

$$
y = C_1 e^{-\frac{k}{2} t}
\cos{ \Bigg ( t \sqrt{ \omega^2 - \frac{k^2}{4}} \Bigg )}
 + 
C_2 e^{-\frac{k}{2}t}
\sin{ \Bigg ( t \sqrt{ \omega^2 - \frac{k^2}{4}} \Bigg ) }
$$

とブロック要素で書くと、

\[ y = C_1 e^{-\frac{k}{2} t} \cos{ \Bigg ( t \sqrt{ \omega^2 - \frac{k^2}{4}} \Bigg )} + C_2 e^{-\frac{k}{2}t} \sin{ \Bigg ( t \sqrt{ \omega^2 - \frac{k^2}{4}} \Bigg ) } \]

と表示できる。

引用(blockquote)

  • 行の頭に >  をつけるだけ
  • プログラムのコードなどは ` と ```` を使う方がフォントなどの表記があうので望ましい
> The “intelligence” demanded of the workman, as well as of the director 
> of an industrial process, is little else than a degree of facility 
> in the apprehension of and adaptation to a quantitatively determined 
> causal sequence. – Thorstein Bunde Veblen

The “intelligence” demanded of the workman, as well as of the director of an industrial process, is little else than a degree of facility in the apprehension of and adaptation to a quantitatively determined causal sequence. – Thorstein Bunde Veblen

コードの実行と表示

他のR Markdown文書と同様に、インラインの場合は`r 1+2+3`のように、コードチャンクの場合は

```{r}
1+2+3
```

とRのコードを実行し、オプションに応じて結果を表示する。RcppやPythonやJuliaのコードにも対応。

表示オプション

以下を覚えておくと、だいたい困らない。

コード・ブロックの開始 実行 コード 出力 警告 メッセージ ^##
```{r}
```{r results=“asis” }
```{r comment=“” }
```{r include=FALSE}
```{r eval=FALSE}
```{r echo=FALSE, include=FALSE, warning=FALSE, message=FALSE}

R Markdown記法のコード表示問題①

  • ```の中に```を入れるとコードチャンクが終了してしまうので、R Markdownの説明をR Markdownで上手く書けない
  • なぜかpreタグの中の```はコードチャンクとして解釈されないので、コードチャンクだけならばpreタグで回避できる
  • しかし`r 1 + 2`や|や$は、preタグの中でも実行/解釈される。だからと言って\でエスケープすると、エスケープ文字ごと表示してしまう
  • preタグと同じプロパティを設定したdivタグを用意し、HTMLのエスケープをそれぞれして、見た目を誤魔化そう
<div class="psudopre">&#x60;r 1+2+3&#x60;</div>

R Markdown記法のコード表示問題②

  • インライン要素で、冒頭が”r “と”R “のコードは必ず実行する
    • e.g. `R CMD INSTALL`と書くと、CMD INSTALLを実行しようとしてエラーになる
  • `をつけなければ実行されないが、コード表記用のフォントにならない(e.g. R CMD INSTALL)
  • Rの文字列表示を上手く使う
    • e.g. ``r "R CMD INSTALL"``R CMD INSTALL
    • 外側の`でコード表記タグにして、内側の`でRのコードとして実行
  • もしくはpreタグと同じプロパティを設定したspanタグを用意

表の作成

R Markdownとしては普通だが、サイズや配色は調整したくなる。

べた書き

| x | y | z |
| :------: | :---: | :---: |
| `r x[1]` | `r y[1]` | `r z[1]` |
| `r x[2]` | `r y[2]` | `r z[2]` |
| `r x[3]` | `r y[3]` | `r z[3]` |

以上のようなコードでパイプ表をつくることもできる。:---が左寄せ、---:が右寄せ、:---:が中央寄せ。

x y z
0.2152 0.63324 0.13667
0.86013 -0.59059 0.9731
0.64043 1.53518 0.22503

配色の変更

  • デフォルトだと背景と混じるので、CSSで色を指定している
  • 奇数行と偶数行で背景色を変えたい場合は、tr:nth-child(odd) tdとtr:nth-child(even) tdにそれぞれ別の色を設定
tr.header {
  color: white;
  background-color: black;
}

tr {
  color: black;
  background-color: #F0F0F0;
}

表の作成 データフレームを表示

データフレームや行列を表示すると見栄えが悪い。 code chunkのオプションにresult=“asis”かcomment=““が無いと行頭に##をつけてくる。

head(df01, 8)
         y        x       z
1  0.63324 0.215204 0.13667
2 -0.59059 0.860133 0.97310
3  1.53518 0.640434 0.22503
4  0.75884 0.046674 0.23908
5  0.64060 0.692636 0.55664
6 -1.89472 0.189462 0.97329
7  0.52616 0.707381 0.47604
8  0.12010 0.808363 0.70775

表の作成 knitr::kableで表示

データフレームをパイプ表に変換してくれる。

knitr::kable(head(df01, 4))
y x z
0.63324 0.21520 0.13667
-0.59059 0.86013 0.97310
1.53518 0.64043 0.22503
0.75884 0.04667 0.23908

表の作成 matrixを表示

knitr::kable(matrix(c(1, 23, 19, 7), 2, 2, dimnames=list(c("A", "B"), c("a", "b"))), 
    align=c("r", "r"), caption="2×2表")
2×2表
a b
A 1 19
B 23 7

表の作成 DT::datatableで表示

高機能だが狭い。背景色を白に指定したが、細かい調整は困難。

DT::datatable(df01, options=list(pageLength=3))

推定結果の表示

  • 一般化線形モデル(GLM)で間に合う頻度主義者は楽ができる
    • stargazerパッケージのhtml出力が使える
    • parameters → insightパッケージはhtml/markdownを出力できる
  • 表を描いてもそんなんでもない

stargazerパッケージ

  • code chunkのオプションにresults="asis", warning=FALSE, message=FALSEを忘れると困った表示になる
r_lm <- lm(y ~ x + z, data=df01)
library(stargazer, quietly = TRUE)
stargazer(r_lm, type="html", out.header=FALSE, suppress.errors=TRUE)
  • 情報量が多いので、CSSで表示サイズと配色を設定したほうが無難

stargazerパッケージ用のCSS

  • 次のスライドのstargazerパッケージの出力の表示はR Markdownで以下のように属性をつけて
## stargazerの表示{.stargazer}
  • CSSでフォントサイズと配色を調整している
section.stargazer tr, section.stargazer td {
    color: black;
    background-color: white;
    border: none;
    font-size: 75%;
}

stargazerの表示

Dependent variable:
y
x 2.176***
(0.178)
z -3.129***
(0.180)
Constant 1.056***
(0.118)
Observations 100
R2 0.792
Adjusted R2 0.788
Residual Std. Error 0.508 (df = 97)
F Statistic 184.730*** (df = 2; 97)
Note: p<0.1; p<0.05; p<0.01

Hlavac, Marek (2022). stargazer: Well-Formatted Regression and Summary Statistics Tables. R package version 5.2.3. https://CRAN.R-project.org/package=stargazer

stargazerパッケージの参照の表示

参照を書いてくれと要請されるので、以下のようにHTMLで書いている。

<div style="margin-top:12px; font-size: 50%;">
Hlavac, Marek (2022). stargazer: Well-Formatted Regression and Summary Statistics Tables. 
R package version 5.2.3. https://CRAN.R-project.org/package=stargazer
</div>

GLMで済む場合はstargazerで作業時間が一気に減るはずなので、有難くリファレンスかどこかに書いておこう。

parametersパッケージ

プレゼンもしくは最近需要が高くなった信頼区間を考えるとこっちの方がよいかも

insight::export_table(parameters::model_parameters(r_lm), format="markdown")
Parameter Coefficient SE CI CI_low CI_high t df_error p
(Intercept) 1.06 0.12 0.95 0.82 1.29 8.95 97 2.43e-14
x 2.18 0.18 0.95 1.82 2.53 12.25 97 2.13e-21
z -3.13 0.18 0.95 -3.49 -2.77 -17.35 97 1.68e-31

交差検証(LOOCV)の表示①

自動で表が作られない場合、例えばLOOCVは表をつくる。

library(boot)
frml <- c("y ~ x + z", "y ~ x", "y ~ z")
delta <- matrix(NA, length(frml), 2, dimnames=list(
    # TeXの\\はRの文字列の中では\\\\と書かないとエスケープ文字
    c("$y = \\beta_0 + \\beta_1 x + \\beta_2 z + \\epsilon$", "$y = \\beta_0 + \\beta_1 x + \\epsilon$", "$y = \\beta_0 + \\beta_2 z + \\epsilon$"),
    c("raw", "adjusted")
))
for(i in 1:length(frml)){
    delta[i, ] <- cv.glm(df01, glm(formula(frml[i]), data=df01))$delta
}
knitr::kable(delta)
raw adjusted
\(y = \beta_0 + \beta_1 x + \beta_2 z + \epsilon\) 0.26564 0.26556
\(y = \beta_0 + \beta_1 x + \epsilon\) 1.07347 1.07324
\(y = \beta_0 + \beta_2 z + \epsilon\) 0.66511 0.66497

交差検証(LOOCV)の表示②

パイプ表の中にTeXの数式とインラインコードを入れて表にすることもできる。

| モデル | `r colnames(delta)[1]` | `r colnames(delta)[2]` |
| :--- | ---: | ---: |
| $y = \beta_0 + \beta_1 x + \beta_2 z + \epsilon$ | `r delta[1,1]` | `r delta[1,2]` |
| $y = \beta_0 + \beta_1 x + \epsilon$ | `r delta[2,1]` | `r delta[2,2]` |
| $y = \beta_0 + \beta_2 z + \epsilon$ | `r delta[3,1]` | `r delta[3,2]` |
モデル raw adjusted
\(y = \beta_0 + \beta_1 x + \beta_2 z + \epsilon\) 0.26564 0.26556
\(y = \beta_0 + \beta_1 x + \epsilon\) 1.07347 1.07324
\(y = \beta_0 + \beta_2 z + \epsilon\) 0.66511 0.66497

プロットの表示

  • code chunkの中にplot命令を入れる
  • code chunkのオプションはfig.align=“center”, fig.width=9, fig.heigth=4のようにつける
  • Rのコードでもpar(mar=c(4, 4, 0.1, 0.1))などと表示調整

図(shape)の表示

  • 図を取り込む
  • 図を描くコードを書く
    • Graphviz
    • Mermaid.js

図(shape)を取り込む

  • 作画ツールでつくったSVGファイルなどを![It's a shape!](example.svg)という風に貼れる
  • サイズ指定したい場合、表示位置を調整したい場合などはhtmlタグを用いる
<div style="text-align:center;">
<img src="example.svg" width="40%"
    style="border: none; box-shadow: none;" alt="It's a shape!">
</div>

It's a shape!

図(shape)を描く

  • 便利フレームワークを使わずJavaScriptなどで低水準関数で図を描くのは手間暇過ぎる
  • DiagrammeRパッケージでGraphvizやMermaid.jsを使える
  • ただしMermaid.js(verison 0.3.0)は描画されたりされなかったり、描画されても全体のpreタグのスタイルが変化したり挙動不審

Graphvizを使う

DiagrammeR::grViz("example.gv", width=1024, height=384)

Mermaid.jsを何とか使う

revealjsとMermaid.jsは相性が悪そうなので隔離する

  1. DiagrammeR::mermaidで生成したhtmlwidgetオブジェクトの設定値を上書きして、htmlwidgets::saveWidgetで保存する
  2. 保存したhtmlファイルにjavascriptを追加する
  3. YAMLフロントマターでself_contained: falseを指定する
  4. マークダウン部分にに保存ファイル名を指定したiframeタグを埋め込む

詳細はDiagrammeR/Mermaid.jsで描いた図をreveal.jsに何とか埋め込む方法を参照

脚注

脚注番号識別子として [^文字列] を文に挟み、本文中のどこかに [^文字列]: 説明 を書くと、文章の末尾に脚注が付記される。

例えば、

十分原理と弱い条件付け原理を受け入れる者は,尤度原理[^1]を受け入れることになる.

[^1]: パラーメーターθの推論において,データxが観察されたあと・・・

と書けばよい。

ハイパーリンクをつけたい

Markdown記法なので

[The R Project for Statistical Computing](https://www.r-project.org/)

The R Project for Statistical Computing

文字入力で困ったときは

対処法3つ

  • HTMLのタグを書く
  • HTMLの文字コード入力(数値文字参照)を使う
  • 文字の前に\を書く

HTMLのタグとタグの間は、HTMLとして解釈

  • 強敵トモ」と入力するには、「<ruby>強敵<rp>(</rp><rt>トモ</rt><rp>)</rp></ruby>」
  • <u>魚心</u>あれば<u>水心</u>」と書けば「魚心あれば水心」とアンダーバーも出せる

特殊文字の入力もHTMLと同様に行なえる

  • 「✓ ♨ ♡ ⚑ ① ② ③」と入力するには、「&#10003; &#x2668; &#x2661; &#9873; &#x2460; &#x2461; &#x2462;」
  • [ ]を&#x5b; &#x5c;と入力するなどエスケープにも使える

エスケープはC言語の文字列などと同様

  • 文字の前に\を書くとエスケープできて、特殊文字もそのまま表示できる。
  • `が、\を書いてもエスケープできないケースがあったりするので、&#x60;という風に書くことも覚えておくほうが無難。

配布資料

  • 【推奨】そのままアップロードして、ケータイなどで見ろと言い放つ
  • YAMLフロントマターのrevealjs_presentation関連の記述を消し去り、html_documentの設定をしてhtmlを生成
    • アップロードして、ケータイなどで見ろと言い放つ
    • 【非推奨】印刷して配る
  • revealjsでGoogle Chromeを通してpdf出力をする
    • YAMLフロントマターがself_contained: falseになっていないと動かない

おわりに

  • スケーラブルなので、モバイル対応
  • ioslides_presentationより直観的
  • 見出しと図表があればプレゼンできる人向けで、官公庁パワポを作りたい人は避けるべし
  • 頻繁に定型レポートを書く人にはたぶん便利で、render関数で生成できるので自動化もできる
  • CSS, htmlのdivやspanタグをいじらないといけない所が多い
R Markdown Format for reveal.js Presentationsのジャンキー解説