In hughjonesd/huxtable: Easily Create and Style Tables for LaTeX, HTML and Other Formats

background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)

options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(echo = FALSE)
library(huxtable)
data(jams)

---

class: center, middle

The jams huxtable

jams

---

class: center, middle

theme_plain

theme_plain(jams)

---

class: center, middle

theme_basic

theme_basic(jams)

---

class: center, middle

theme_compact

theme_compact(jams)

---

class: center, middle

theme_striped

theme_striped(jams)

---

class: center, middle

theme_article

theme_article(jams)

---

class: center, middle

theme_bright

theme_bright(jams)

---

class: center, middle

theme_grey

theme_grey(jams)

---

class: center, middle

theme_mondrian

theme_mondrian(jams)

---

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 can help you download fonts and generate the necessary CSS.

---

Macros

• remark.js allows users to define custom macros (JS functions) that can be applied to Markdown text using the syntax ![:macroName arg1, arg2, ...] or ![:macroName arg1, arg2, ...](this). 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 ![:scale 50%](image.jpg)

  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. 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:

@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:

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 for an example of using the Fira Code 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:

names(xaringan:::list_css())

---

Themes

To use a theme, you can specify the css option as an array of CSS filenames (without the .css extensions), e.g.,

output:
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts]

If you want to contribute a theme to xaringan, please read this blog post.

---

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¹ 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.^2,3

.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 (写輪眼; the package name)

• The moon reader (月読; an attractive R Markdown output format)

• Chakra (查克拉; the path to the remark.js library, which is the power to drive the presentation)

• Nature transformation (性質変化; transform the chakra by setting different options)

• The infinite moon reader (無限月読; start a local web server to continuously serve your slides)

• The 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.

The chakra comes from remark.js, knitr, and R Markdown.

hughjonesd/huxtable documentation built on Feb. 17, 2024, 12:20 a.m.