A Few Tips for Xaringan

Add CSS Codes within RMarkdown

When using Xaringan to create slides, one may include a custom.css or use the xaringanthemer package to change styles in whole or by part.

Recently, I found another trick that allow you make changes to styles within your rmarkdown file. It’s very simple. You simply only need to add a CSS code chunk¹ at the beginning of your content.

Here is an example.

```{css, echo=F}
.remark-slide table, .remark-slide table thead th {
    border-top: 0px;
    border-bottom: 0px;
}
.remark-slide thead, .remark-slide tr:nth-child(even){
    background-color: white;
}
table{
    border-collapse: collapse;
}
.remark-slide thead:empty {
    display: none;
}
```

With the above code, as you can see, the background color, borders, and empty header in tables will be removed.

Identify html Tags for Xaringan

To change the style of a html tag in Xaringan, we have to know the tag name. The tag name can be found in the source of the html file. One easy way to check the source of a webpage is to inspect the page. In Google Chrome, right-clicking the part you saw on the webpage and then clicking inspect will lead you to the source code.

Define TeX Macros

Similarly, one may define customized tex macros for MathJax at the beginning the content. For example, to define \RR for the blackboard bold $\mathbb{R}$, one may add the following lines in somewhere before the first time you use the macro \RR.

$$\newcommand{\RR}{\mathbb{R}}$$

Use MathJax Native Math Delimiters in KableExtra

When using Xaringan, the math delimiter ‘${}^{\prime }‘$’ will be translated in to ‘(’ ‘)’. As part of webpage content, it will be rendered properly by MathJax. However, when using math with KableExtra, the native math delimiter ‘${}^{\prime }‘$’ should be used. Otherwise, there will be an extra pair of single quotations. Here is an example https://github.com/yihui/xaringan/issues/94.