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.

1. Xaringan R Series
2. Xaringan R Themes

KATA PENGANTAR Assalamu’alaikum Wr.Wb. Puji dan syukur saya panjatkan kehadirat Allah SWT yang telah memberikan r.

1. People all over the world are turning to R, Python, and other open-source programming languages, to make sense of data. Inspired by innovators in science, education, government, and industry, RStudio develops free and open tools for R, and enterprise-ready professional products for teams who use both R and Python, to scale and share their work.
2. If you want to present analyses or visualizations made with R code, consider making your slides with R Markdown using the xaringan package. If you’ve built an R package, the pkgdown package makes it quick and relatively painless to build a website for your package, using all the work you’ve already done to write and document your functions.

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.

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.

Xaringan R Series

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

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.

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.

Slides

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

Xaringan R Themes

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!