Content classes not working on the third level of Unordered/ordered lists

[W-Mohammed]

Hi,

I am new to xaringan and xaringanExtra, so please forgive me if the answer to my problem is obvious.

I am working on a slide deck and wanted to highlight some text on the third level of an unordered list, but I could not succeed. So here is an example of the code I have for your reference:

---
title: "Presentation Ninja"
subtitle: "&#x2694;&#xFE0F; xaringan +<br/>&#x1F60E; xaringanthemer"  
author: 
  - "Yihui Xie"
  - "Garrick Aden-Buie"
date: '`r Sys.Date()`'
output:
  xaringan::moon_reader:
    css: xaringan-themer.css
    nature:
      slideNumberFormat: "%current%"
      highlightStyle: github
      highlightLines: true
      ratio: 16:9
      countIncrementalSlides: true
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
knitr::opts_chunk$set(
  fig.width=9, fig.height=3.5, fig.retina=3,
  out.width = "100%",
  cache = FALSE,
  echo = TRUE,
  message = FALSE, 
  warning = FALSE,
  hiline = TRUE
)

library(xaringanthemer)
style_duo_accent(
  primary_color = "#1381B0",
  secondary_color = "#FF961C",
  inverse_header_color = "#FFFFFF",
  colors = c(red = "#FF0000", blue = "#bad4ed")
)

Typography

Text .red[can] be bold, italic, strikethrough, or inline code.

• This is .red[red]
  • This too is .red[red]
  • This text is black
    • This should be .red[red]
    • This text is black
      1. This is .blue[blue]
      2. This too is .blue[blue]
      3. This text is black
      4. This should be .blue[blue]
      5. This text is black

[gadenbuie]

Thanks for the report and no you're not missing anything obvious. I would have expected your code to work. Unfortunately, it's most likely an issue with the markdown parser used by the javascript slide framework (remarkjs) that powers xaringan, so in the end there's not much I can do about it.

I can offer you the unsatisfying option of using HTML for the third-level list item:

1. This is .red[red]
  1. This too is .red[red]
  1. This text is black
      1. This should be <span class="red">red</span>
      1. This text is black