Here’s a quick tipfor making your xaringan slides shinewith a little CSS.Specifically,I’m going to show you how to use the:last-of-type pseudo-classto highlight the current bullet in progressive slides.We can also use the :last-of-type selectorto show only the output of the last R chunk in a slide full of many R chunks.In each case,these techniques work best for progressive slides,or slides with content that builds up slowly.

However, when you view such pages in a real web browser, you will need a separate web server. The easiest way to preview these HTML pages in a web browser may be through the RStudio addin “Infinite Moon Reader”, which requires the xaringan package (Xie 2021b). Or equivalently, you can call the function xaringan::infmr. Dari apa yang saya pahami tentang RPC (Remote Procedure Calls), adalah bahwa mereka menyediakan cara untuk mengirim panggilan fungsi, pemanggilan, dll ke mesin jarak jauh. Keuntungan nyata dari hal.

In this post,I’ll demonstrate how :last-of-type can be used tohighlight the last list item,bold the last list item,or reveal only the last R code chunk output.

Progressive List Slides

To create progressive slides in xaringan,use two dashes --,all alone on their own line,to indicate a pause in the current slide.

xaringan actually creates new slides for each pause,where each slide shows the content up to the pause.So the markdown below creates three slides,the first having one bullet point,the second having two bullet points,and the third having the full list.

When rendered,three slides are createdand the final slide contains the following HTML.

The first and second partial slides look exactly the same,except that the <ul>unordered list elementcontains only the first one or first two <li> list items.

If you’re building up a slide full of bullet points,you’re probably talking about the last element in the listas you reveal each new list item.We can create a neat effect where the last list item —hence the :last-of-type pseudo-class —is highlighted by softening the previous list itemsor by changing the styling of the last item.

In HTML, lists are unordered <ul> or ordered <ol> listscontaining list elements created with the <li> tag.Here’s a small example,similar to the structure of the HTML and CSS we’ll use for xaringan.

The .demo > li rule styles the list itemsunder the <ul> tag with the .demo class,setting the text color to a muted gray.The .demo > li:last-of-type rulestyles the last <li> that’s one level below(that’s what the > means)the .demo element.

Highlight Last List Item

Use the following CSS chunk —you can just copy and paste the chunk below into your slides’ Rmd file —to highlight the last list item by reducing the opacity of the other list items.

Xaringanextra

Then, add the highlight-last-item class to any progressively revealed slideto focus on the current list item.

Here’s a complete example.Click into the Slides tab to preview the stylein an embedded xaringan presentation.

Slides

Click inside the slides belowand press the ←/→arrows to progressively reveal the bullet points.

As written above,the last list item of each list on the slide will be highlighted,which may not be what you want if you have multiple lists on the slide.You could also add the :last-of-type pseudo-classto the ul and ol elements as wellto target the last item of the last list on the slide.

Bold Last Item

You can use this pattern to style progressive lists any way you want.Here’s another example to do something similar,this time simply making the last list items bold.

Drop the CSS chunk above into your slides,to create slides like the example below.

R Presentations

Slides

Show Only Last Code Output

As a final example,we can also apply this trick to slides with multiple R code chunks.I sometimes want to demonstrate multiple R commands on a slide,but only the output of the last example matters.

Xaringan R Themes

This example is a little bit more complicated,but you can drop the CSS chunk below into your slidesto create a show-only-last-code-result class.

Here’s a complete example demonstrating a random sampleof random sampling functions in Rand only showing the output from the last command.

Xaringan R U

Slides

Ioslides Examples

If you like xaringan,you should check out my package, xaringanthemer!

If you really likexaringan,you might also enjoy another package I’ve created: xaringanExtra.It’s also how I created thepanelsetsabove, which work in blogdown as well!