-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUntitled.html
872 lines (630 loc) · 27.8 KB
/
Untitled.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<title>Presentation Ninja</title>
<meta charset="utf-8" />
<meta name="author" content="Yihui Xie" />
<script src="libs/header-attrs/header-attrs.js"></script>
<link href="libs/remark-css/default.css" rel="stylesheet" />
<link href="libs/remark-css/default-fonts.css" rel="stylesheet" />
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/leaflet/leaflet.css" rel="stylesheet" />
<script src="libs/leaflet/leaflet.js"></script>
<link href="libs/leafletfix/leafletfix.css" rel="stylesheet" />
<script src="libs/proj4/proj4.min.js"></script>
<script src="libs/Proj4Leaflet/proj4leaflet.js"></script>
<link href="libs/rstudio_leaflet/rstudio_leaflet.css" rel="stylesheet" />
<script src="libs/leaflet-binding/leaflet.js"></script>
<link href="libs/datatables-css/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding/datatables.js"></script>
<link href="libs/dt-core/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core/js/jquery.dataTables.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
</head>
<body>
<textarea id="source">
class: center, middle, inverse, title-slide
# Presentation Ninja
## ⚔<br/>with xaringan
### Yihui Xie
### RStudio, PBC
### 2016/12/12 (updated: 2021-03-15)
---
background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
???
Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Sharingan_triple.svg)
---
class: center, middle
# xaringan
### /ʃaː.'riŋ.ɡan/
---
class: inverse, center, middle
# Get Started
---
# Hello World
Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):
```r
remotes::install_github("yihui/xaringan")
```
--
You are recommended to use the [RStudio IDE](https://www.rstudio.com/products/rstudio/), but you do not have to.
- Create a new R Markdown document from the menu `File -> New File -> R Markdown -> From Template -> Ninja Presentation`;<sup>1</sup>
--
- Click the `Knit` button to compile it;
--
- or use the [RStudio Addin](https://rstudio.github.io/rstudioaddins/)<sup>2</sup> "Infinite Moon Reader" to live preview the slides (every time you update and save the Rmd document, the slides will be automatically reloaded in RStudio Viewer.
.footnote[
[1] 中文用户请看[这份教程](https://slides.yihui.org/xaringan/zh-CN.html)
[2] See [#2](https://github.com/yihui/xaringan/issues/2) if you do not see the template or addin in RStudio.
]
---
background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg)
background-position: 50% 50%
class: center, bottom, inverse
# You only live once!
---
# Hello Ninja
As a presentation ninja, you certainly should not be satisfied by the "Hello World" example. You need to understand more about two things:
1. The [remark.js](https://remarkjs.com) library;
1. The **xaringan** package;
Basically **xaringan** injected the chakra of R Markdown (minus Pandoc) into **remark.js**. The slides are rendered by remark.js in the web browser, and the Markdown source needed by remark.js is generated from R Markdown (**knitr**).
---
# remark.js
You can see an introduction of remark.js from [its homepage](https://remarkjs.com). You should read the [remark.js Wiki](https://github.com/gnab/remark/wiki) at least once to know how to
- create a new slide (Markdown syntax<sup>*</sup> and slide properties);
- format a slide (e.g. text alignment);
- configure the slideshow;
- and use the presentation (keyboard shortcuts).
It is important to be familiar with remark.js before you can understand the options in **xaringan**.
.footnote[[*] It is different with Pandoc's Markdown! It is limited but should be enough for presentation purposes. Come on... You do not need a slide for the Table of Contents! Well, the Markdown support in remark.js [may be improved](https://github.com/gnab/remark/issues/142) in the future.]
---
background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg)
background-size: cover
class: center, bottom, inverse
# I was so happy to have discovered remark.js!
---
class: inverse, middle, center
# Using xaringan
---
# xaringan
Provides an R Markdown output format `xaringan::moon_reader` as a wrapper for remark.js, and you can use it in the YAML metadata, e.g.
```yaml
---
title: "A Cool Presentation"
output:
xaringan::moon_reader:
yolo: true
nature:
autoplay: 30000
---
```
See the help page `?xaringan::moon_reader` for all possible options that you can use.
---
# remark.js vs xaringan
Some differences between using remark.js (left) and using **xaringan** (right):
.pull-left[
1. Start with a boilerplate HTML file;
1. Plain Markdown;
1. Write JavaScript to autoplay slides;
1. Manually configure MathJax;
1. Highlight code with `*`;
1. Edit Markdown source and refresh browser to see updated slides;
]
.pull-right[
1. Start with an R Markdown document;
1. R Markdown (can embed R/other code chunks);
1. Provide an option `autoplay`;
1. MathJax just works;<sup>*</sup>
1. Highlight code with `{{}}`;
1. The RStudio addin "Infinite Moon Reader" automatically refreshes slides on changes;
]
.footnote[[*] Not really. See next page.]
---
# Math Expressions
You can write LaTeX math expressions inside a pair of dollar signs, e.g. &#36;\alpha+\beta$ renders `\(\alpha+\beta\)`. You can use the display style with double dollar signs:
```
$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$
```
`$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$`
Limitations:
1. The source code of a LaTeX math expression must be in one line, unless it is inside a pair of double dollar signs, in which case the starting `$$` must appear in the very beginning of a line, followed immediately by a non-space character, and the ending `$$` must be at the end of a line, led by a non-space character;
1. There should not be spaces after the opening `$` or before the closing `$`.
1. Math does not work on the title slide (see [#61](https://github.com/yihui/xaringan/issues/61) for a workaround).
---
# R Code
```r
# a boring regression
fit = lm(dist ~ 1 + speed, data = cars)
coef(summary(fit))
```
```
# Estimate Std. Error t value Pr(>|t|)
# (Intercept) -17.579095 6.7584402 -2.601058 1.231882e-02
# speed 3.932409 0.4155128 9.463990 1.489836e-12
```
```r
dojutsu = c('地爆天星', '天照', '加具土命', '神威', '須佐能乎', '無限月読')
grep('天', dojutsu, value = TRUE)
```
```
# [1] "地爆天星" "天照"
```
---
# R Plots
```r
par(mar = c(4, 4, 1, .1))
plot(cars, pch = 19, col = 'darkgray', las = 1)
abline(fit, lwd = 2)
```
<!-- -->
---
# Tables
If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g.,
```r
knitr::kable(head(iris), format = 'html')
```
<table>
<thead>
<tr>
<th style="text-align:right;"> Sepal.Length </th>
<th style="text-align:right;"> Sepal.Width </th>
<th style="text-align:right;"> Petal.Length </th>
<th style="text-align:right;"> Petal.Width </th>
<th style="text-align:left;"> Species </th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right;"> 5.1 </td>
<td style="text-align:right;"> 3.5 </td>
<td style="text-align:right;"> 1.4 </td>
<td style="text-align:right;"> 0.2 </td>
<td style="text-align:left;"> setosa </td>
</tr>
<tr>
<td style="text-align:right;"> 4.9 </td>
<td style="text-align:right;"> 3.0 </td>
<td style="text-align:right;"> 1.4 </td>
<td style="text-align:right;"> 0.2 </td>
<td style="text-align:left;"> setosa </td>
</tr>
<tr>
<td style="text-align:right;"> 4.7 </td>
<td style="text-align:right;"> 3.2 </td>
<td style="text-align:right;"> 1.3 </td>
<td style="text-align:right;"> 0.2 </td>
<td style="text-align:left;"> setosa </td>
</tr>
<tr>
<td style="text-align:right;"> 4.6 </td>
<td style="text-align:right;"> 3.1 </td>
<td style="text-align:right;"> 1.5 </td>
<td style="text-align:right;"> 0.2 </td>
<td style="text-align:left;"> setosa </td>
</tr>
<tr>
<td style="text-align:right;"> 5.0 </td>
<td style="text-align:right;"> 3.6 </td>
<td style="text-align:right;"> 1.4 </td>
<td style="text-align:right;"> 0.2 </td>
<td style="text-align:left;"> setosa </td>
</tr>
<tr>
<td style="text-align:right;"> 5.4 </td>
<td style="text-align:right;"> 3.9 </td>
<td style="text-align:right;"> 1.7 </td>
<td style="text-align:right;"> 0.4 </td>
<td style="text-align:left;"> setosa </td>
</tr>
</tbody>
</table>
---
# HTML Widgets
I have not thoroughly tested HTML widgets against **xaringan**. Some may work well, and some may not. It is a little tricky.
Similarly, the Shiny mode (`runtime: shiny`) does not work. I might get these issues fixed in the future, but these are not of high priority to me. I never turn my presentation into a Shiny app. When I need to demonstrate more complicated examples, I just launch them separately. It is convenient to share slides with other people when they are plain HTML/JS applications.
See the next page for two HTML widgets.
---
```r
library(leaflet)
leaflet() %>% addTiles() %>% setView(-93.65, 42.0285, zoom = 17)
```
<div id="htmlwidget-359e98555f86e07494f7" style="width:100%;height:432px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-359e98555f86e07494f7">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[42.0285,-93.65],17,[]]},"evals":[],"jsHooks":[]}</script>
---
```r
DT::datatable(
head(iris, 10),
fillContainer = FALSE, options = list(pageLength = 8)
)
```
<div id="htmlwidget-4f9ecadbbcce2eeced8e" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-4f9ecadbbcce2eeced8e">{"x":{"filter":"none","fillContainer":false,"data":[["1","2","3","4","5","6","7","8","9","10"],[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9],[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1],[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5],[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1],["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>Sepal.Length<\/th>\n <th>Sepal.Width<\/th>\n <th>Petal.Length<\/th>\n <th>Petal.Width<\/th>\n <th>Species<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":8,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[8,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>
---
# Some Tips
- Do not forget to try the `yolo` option of `xaringan::moon_reader`.
```yaml
output:
xaringan::moon_reader:
yolo: true
```
---
# Some Tips
- Slides can be automatically played if you set the `autoplay` option under `nature`, e.g. go to the next slide every 30 seconds in a lightning talk:
```yaml
output:
xaringan::moon_reader:
nature:
autoplay: 30000
```
- If you want to restart the play after it reaches the last slide, you may set the sub-option `loop` to TRUE, e.g.,
```yaml
output:
xaringan::moon_reader:
nature:
autoplay:
interval: 30000
loop: true
```
---
# Some Tips
- A countdown timer can be added to every page of the slides using the `countdown` option under `nature`, e.g. if you want to spend one minute on every page when you give the talk, you can set:
```yaml
output:
xaringan::moon_reader:
nature:
countdown: 60000
```
Then you will see a timer counting down from `01:00`, to `00:59`, `00:58`, ... When the time is out, the timer will continue but the time turns red.
---
# Some Tips
- The title slide is created automatically by **xaringan**, but it is just another remark.js slide added before your other slides.
The title slide is set to `class: center, middle, inverse, title-slide` by default. You can change the classes applied to the title slide with the `titleSlideClass` option of `nature` (`title-slide` is always applied).
```yaml
output:
xaringan::moon_reader:
nature:
titleSlideClass: [top, left, inverse]
```
--
- If you'd like to create your own title slide, disable **xaringan**'s title slide with the `seal = FALSE` option of `moon_reader`.
```yaml
output:
xaringan::moon_reader:
seal: false
```
---
# Some Tips
- There are several ways to build incremental slides. See [this presentation](https://slides.yihui.org/xaringan/incremental.html) for examples.
- The option `highlightLines: true` of `nature` will highlight code lines that start with `*`, or are wrapped in `{{ }}`, or have trailing comments `#<<`;
```yaml
output:
xaringan::moon_reader:
nature:
highlightLines: true
```
See examples on the next page.
---
# Some Tips
.pull-left[
An example using a leading `*`:
```r
if (TRUE) {
** message("Very important!")
}
```
Output:
```r
if (TRUE) {
* message("Very important!")
}
```
This is invalid R code, so it is a plain fenced code block that is not executed.
]
.pull-right[
An example using `{{}}`:
````
```{r tidy=FALSE}
if (TRUE) {
*{{ message("Very important!") }}
}
```
````
Output:
```r
if (TRUE) {
* message("Very important!")
}
```
```
## Very important!
```
It is valid R code so you can run it. Note that `{{}}` can wrap an R expression of multiple lines.
]
---
# Some Tips
An example of using the trailing comment `#<<` to highlight lines:
````markdown
```{r tidy=FALSE}
library(ggplot2)
ggplot(mtcars) +
aes(mpg, disp) +
geom_point() + #<<
geom_smooth() #<<
```
````
Output:
```r
library(ggplot2)
ggplot(mtcars) +
aes(mpg, disp) +
* geom_point() +
* geom_smooth()
```
---
# Some Tips
When you enable line-highlighting, you can also use the chunk option `highlight.output` to highlight specific lines of the text output from a code chunk. For example, `highlight.output = TRUE` means highlighting all lines, and `highlight.output = c(1, 3)` means highlighting the first and third line.
````md
```{r, highlight.output=c(1, 3)}
head(iris)
```
````
```
*## 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
```
Question: what does `highlight.output = c(TRUE, FALSE)` mean? (Hint: think about R's recycling of vectors)
---
# Some Tips
- To make slides work offline, you need to download a copy of remark.js in advance, because **xaringan** uses the online version by default (see the help page `?xaringan::moon_reader`).
- You can use `xaringan::summon_remark()` to download the latest or a specified version of remark.js. By default, it is downloaded to `libs/remark-latest.min.js`.
- Then change the `chakra` option in YAML to point to this file, e.g.
```yaml
output:
xaringan::moon_reader:
chakra: libs/remark-latest.min.js
```
- If you used Google fonts in slides (the default theme uses _Yanone Kaffeesatz_, _Droid Serif_, and _Source Code Pro_), they won't work offline unless you download or install them locally. The Heroku app [google-webfonts-helper](https://google-webfonts-helper.herokuapp.com/fonts) can help you download fonts and generate the necessary CSS.
---
# Macros
- remark.js [allows users to define custom macros](https://github.com/yihui/xaringan/issues/80) (JS functions) that can be applied to Markdown text using the syntax `![:macroName arg1, arg2, ...]` or ``. For example, before remark.js initializes the slides, you can define a macro named `scale`:
```js
remark.macros.scale = function (percentage) {
var url = this;
return '<img src="' + url + '" style="width: ' + percentage + '" />';
};
```
Then the Markdown text
```markdown
```
will be translated to
```html
<img src="image.jpg" style="width: 50%" />
```
---
# Macros (continued)
- To insert macros in **xaringan** slides, you can use the option `beforeInit` under the option `nature`, e.g.,
```yaml
output:
xaringan::moon_reader:
nature:
beforeInit: "macros.js"
```
You save your remark.js macros in the file `macros.js`.
- The `beforeInit` option can be used to insert arbitrary JS code before `remark.create()`. Inserting macros is just one of its possible applications.
---
# CSS
Among all options in `xaringan::moon_reader`, the most challenging but perhaps also the most rewarding one is `css`, because it allows you to customize the appearance of your slides using any CSS rules or hacks you know.
You can see the default CSS file [here](https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/default.css). You can completely replace it with your own CSS files, or define new rules to override the default. See the help page `?xaringan::moon_reader` for more information.
---
# CSS
For example, suppose you want to change the font for code from the default "Source Code Pro" to "Ubuntu Mono". You can create a CSS file named, say, `ubuntu-mono.css`:
```css
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
```
Then set the `css` option in the YAML metadata:
```yaml
output:
xaringan::moon_reader:
css: ["default", "ubuntu-mono.css"]
```
Here I assume `ubuntu-mono.css` is under the same directory as your Rmd.
See [yihui/xaringan#83](https://github.com/yihui/xaringan/issues/83) for an example of using the [Fira Code](https://github.com/tonsky/FiraCode) font, which supports ligatures in program code.
---
# Themes
Don't want to learn CSS? Okay, you can use some user-contributed themes. A theme typically consists of two CSS files `foo.css` and `foo-fonts.css`, where `foo` is the theme name. Below are some existing themes:
```r
names(xaringan:::list_css())
```
```
## [1] "chocolate-fonts" "chocolate" "default-fonts"
## [4] "default" "duke-blue" "fc-fonts"
## [7] "fc" "hygge-duke" "hygge"
## [10] "ki-fonts" "ki" "kunoichi"
## [13] "lucy-fonts" "lucy" "metropolis-fonts"
## [16] "metropolis" "middlebury-fonts" "middlebury"
## [19] "nhsr-fonts" "nhsr" "ninjutsu"
## [22] "rladies-fonts" "rladies" "robot-fonts"
## [25] "robot" "rutgers-fonts" "rutgers"
## [28] "shinobi" "tamu-fonts" "tamu"
## [31] "uio-fonts" "uio" "uo-fonts"
## [34] "uo" "uol-fonts" "uol"
## [37] "useR-fonts" "useR"
```
---
# Themes
To use a theme, you can specify the `css` option as an array of CSS filenames (without the `.css` extensions), e.g.,
```yaml
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
```
If you want to contribute a theme to **xaringan**, please read [this blog post](https://yihui.org/en/2017/10/xaringan-themes).
---
class: inverse, middle, center
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/39/Naruto_Shiki_Fujin.svg)
background-size: contain
# Naruto
---
background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
background-size: 100px
background-position: 90% 8%
# Sharingan
The R package name **xaringan** was derived<sup>1</sup> from **Sharingan**, a dōjutsu in the Japanese anime _Naruto_ with two abilities:
- the "Eye of Insight"
- the "Eye of Hypnotism"
I think a presentation is basically a way to communicate insights to the audience, and a great presentation may even "hypnotize" the audience.<sup>2,3</sup>
.footnote[
[1] In Chinese, the pronounciation of _X_ is _Sh_ /ʃ/ (as in _shrimp_). Now you should have a better idea of how to pronounce my last name _Xie_.
[2] By comparison, bad presentations only put the audience to sleep.
[3] Personally I find that setting background images for slides is a killer feature of remark.js. It is an effective way to bring visual impact into your presentations.
]
---
# Naruto terminology
The **xaringan** package borrowed a few terms from Naruto, such as
- [Sharingan](https://naruto.fandom.com/wiki/Sharingan) (写輪眼; the package name)
- The [moon reader](https://naruto.fandom.com/wiki/Moon_Reader) (月読; an attractive R Markdown output format)
- [Chakra](https://naruto.fandom.com/wiki/Chakra) (查克拉; the path to the remark.js library, which is the power to drive the presentation)
- [Nature transformation](https://naruto.fandom.com/wiki/Nature_Transformation) (性質変化; transform the chakra by setting different options)
- The [infinite moon reader](https://naruto.fandom.com/wiki/Infinite_Tsukuyomi) (無限月読; start a local web server to continuously serve your slides)
- The [summoning technique](https://naruto.fandom.com/wiki/Summoning_Technique) (download remark.js from the web)
You can click the links to know more about them if you want. The jutsu "Moon Reader" may seem a little evil, but that does not mean your slides are evil.
---
class: center
# Hand seals (印)
Press `h` or `?` to see the possible ninjutsu you can use in remark.js.
---
class: center, middle
# Thanks!
Slides created via the R package [**xaringan**](https://github.com/yihui/xaringan).
The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](https://yihui.org/knitr/), and [R Markdown](https://rmarkdown.rstudio.com).
</textarea>
<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create({
"highlightStyle": "github",
"highlightLines": true,
"countIncrementalSlides": false
});
if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
window.dispatchEvent(new Event('resize'));
});
(function(d) {
var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
if (!r) return;
s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
d.head.appendChild(s);
})(document);
(function(d) {
var el = d.getElementsByClassName("remark-slides-area");
if (!el) return;
var slide, slides = slideshow.getSlides(), els = el[0].children;
for (var i = 1; i < slides.length; i++) {
slide = slides[i];
if (slide.properties.continued === "true" || slide.properties.count === "false") {
els[i - 1].className += ' has-continuation';
}
}
var s = d.createElement("style");
s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
d.head.appendChild(s);
})(document);
// delete the temporary CSS (for displaying all slides initially) when the user
// starts to view slides
(function() {
var deleted = false;
slideshow.on('beforeShowSlide', function(slide) {
if (deleted) return;
var sheets = document.styleSheets, node;
for (var i = 0; i < sheets.length; i++) {
node = sheets[i].ownerNode;
if (node.dataset["target"] !== "print-only") continue;
node.parentNode.removeChild(node);
}
deleted = true;
});
})();
(function() {
"use strict"
// Replace <script> tags in slides area to make them executable
var scripts = document.querySelectorAll(
'.remark-slides-area .remark-slide-container script'
);
if (!scripts.length) return;
for (var i = 0; i < scripts.length; i++) {
var s = document.createElement('script');
var code = document.createTextNode(scripts[i].textContent);
s.appendChild(code);
var scriptAttrs = scripts[i].attributes;
for (var j = 0; j < scriptAttrs.length; j++) {
s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
}
scripts[i].parentElement.replaceChild(s, scripts[i]);
}
})();
(function() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
links[i].target = '_blank';
}
}
})();
// adds .remark-code-has-line-highlighted class to <pre> parent elements
// of code chunks containing highlighted lines with class .remark-code-line-highlighted
(function(d) {
const hlines = d.querySelectorAll('.remark-code-line-highlighted');
const preParents = [];
const findPreParent = function(line, p = 0) {
if (p > 1) return null; // traverse up no further than grandparent
const el = line.parentElement;
return el.tagName === "PRE" ? el : findPreParent(el, ++p);
};
for (let line of hlines) {
let pre = findPreParent(line);
if (pre && !preParents.includes(pre)) preParents.push(pre);
}
preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted"));
})(document);</script>
<script>
slideshow._releaseMath = function(el) {
var i, text, code, codes = el.getElementsByTagName('code');
for (i = 0; i < codes.length;) {
code = codes[i];
if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
text = code.textContent;
if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
/^\$\$(.|\s)+\$\$$/.test(text) ||
/^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
code.outerHTML = code.innerHTML; // remove <code></code>
continue;
}
}
i++;
}
};
slideshow._releaseMath(document);
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
if (location.protocol !== 'file:' && /^https?:/.test(script.src))
script.src = script.src.replace(/^https?:/, '');
document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
</body>
</html>