class: center, middle, inverse, title-slide .title[ # A {xaringan} template for BIPS presentations ] .subtitle[ ## A scientific thing ] .author[ ### Author Name ] .date[ ### 2026-04-15 ] --- class: middle # {xaringan} (/ʃæ.'riŋ.ɡæn/) with BIPS styles This is a BIPS-theme for the [`{xaringan}`](https://slides.yihui.org/xaringan/) RMarkdown presentation format developed by Yihui Xie. It serves as an alternative to `\(\LaTeX\)`/Beamer PDF slides and allows interactive/animated content and easy web-based sharing and embedding. You can use math mostly as you would with `\(\LaTeX\)`, but with some caveats. ??? These are slide comments visible in the .bipsorange[presenter view]. You can use `markdown` here as usual ¯\\\_(ツ)_/¯ --- class: center, middle # That's the gist! The remaining slides are mostly taken from the official [`{xaringan}`](https://slides.yihui.org/xaringan/) demonstration by Yihui Xie. --- class: center, middle # xaringan ### /ʃæ.'riŋ.ɡæn/ --- class: inverse, center, middle # Get Started --- # Hello World 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] 中文用户请看[这份教程](http://slides.yihui.name/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. ] --- # 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.] --- 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. $\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) ``` <img src="/home/runner/work/bipsdown/bipsdown/_site/bips-xaringan/index_files/figure-html/cars-1.svg" alt="" width="504" style="display: block; margin: auto;" /> --- # 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(8.8585, 53.10014, zoom = 18) ``` <div class="leaflet html-widget html-fill-item" id="htmlwidget-260ecf0537370cef0401" style="width:100%;height:432px;"></div> <script type="application/json" data-for="htmlwidget-260ecf0537370cef0401">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{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=\"https://openstreetmap.org/copyright/\">OpenStreetMap<\/a>, <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL<\/a>"}]}],"setView":[[53.10014,8.858499999999999],18,[]]},"evals":[],"jsHooks":[]}</script> --- ``` r DT::datatable( head(iris, 10), fillContainer = FALSE, options = list(pageLength = 8) ) ``` <div class="datatables html-widget html-fill-item" id="htmlwidget-46ff5638e397264a7a9d" style="width:100%;height:auto;"></div> <script type="application/json" data-for="htmlwidget-46ff5638e397264a7a9d">{"x":{"filter":"none","vertical":false,"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},{"name":" ","targets":0},{"name":"Sepal.Length","targets":1},{"name":"Sepal.Width","targets":2},{"name":"Petal.Length","targets":3},{"name":"Petal.Width","targets":4},{"name":"Species","targets":5}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[8,10,25,50,100]}},"evals":[],"jsHooks":[]}</script> --- # Some Tips - When you use the "Infinite Moon Reader" addin in RStudio, your R session will be blocked by default. You can click the red button on the right of the console to stop serving the slides, or use the _daemonized_ mode so that it does not block your R session. To do the latter, you can set the option ```r options(servr.daemon = TRUE) ``` in your current R session, or in `~/.Rprofile` so that it is applied to all future R sessions. I do the latter by myself. To know more about the web server, see the [**servr**](https://github.com/yihui/servr) package. --- # 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 ``` -- - 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 - There are several ways to build incremental slides. See [this presentation](https://slides.yihui.name/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() ``` --- class: center, middle, thanks background-image: none # Thank you for your attention ### [www.leibniz-bips.de/en](https://www.leibniz-bips.de/en) .pull-left[.right[ #### Contact .bipsblue[Author Name] Leibniz Institute for Prevention Research and Epidemiology - BIPS GmbH Achterstraße 30 D-28359 Bremen .bipsblue[username@leibniz-bips.de] ]] .pull-right[ <img src="bips-logo.png" alt="" width="50%" style="display: block; margin: auto;" /> ]