Xaringan: A "don't include slide" flag?

[zross]

Yihui -- any suggestions for a "don't include this slide" kind of flag? There are certain slides that I do/don't want to show to certain audiences. In the past I used different git branches but this is a pain, it would be great to have something kind of like the visibility: hidden; that could turn off the entire slide when it's compiled. Is there a way to do this?

[pat-s]

---
exclude: true

# xaringan

### /ʃæ.'riŋ.ɡæn/

---

see https://github.com/gnab/remark/wiki/Markdown#exclude

[zross]

This will totally work! But would there be a way more like a CSS class? With exclude: true I would need to go through each time and exclude/not exclude, I can definitely do this. But if there was a class I could assign that would be better.

Consider the scenario -- teaching an R workshop -- sometimes it's to super-beginners and sometimes to intermediate and once in a while more advanced users. If I had something like what is below I could just toggle hidden/visible and wouldn't have to go through all the slides and turn on/off. Is there a way to do this perhaps?

.beginners{
visibility: hidden;
}

.intermediate{
visibility: hidden;
}

.advanced{
visibility: visible;
}

[yihui]

Yes, since you know CSS, you are a ninja by my definition in README. With remark.js, you can assign arbitrary CSS classes to individual sides, e.g.,

class: beginners

That is one of the most powerful things of remark.js (infinitely customizable as long as you know CSS).

[zross]

Thanks so much for this answer. I did try this but because the class is assigned to the inner div and not the container/slide div having it hidden only leaves a blank screen (rather than dropping the slide entirely). But this is fine, I can figure something out, I really appreciate the advice!

[yihui]

Okay I see what you mean now. I think you could JavaScript to select the parent div and remove it (or wait until CSS can natively select parent elements someday). You are a ninja, and must be able to figure it out :)

[zross]

Yes, probably some jQuery to find a class and go up to the container :)

[MeganBeckett]

This really would be helpful!

[yihui]

@MeganBeckett I don't have time to write the JavaScript code for you, but it shouldn't be too complicated: divs with a certain class can be selected via document.querySelectorAll(), and parent elements can be selected via .parentElement (no need to use jQuery). If you don't get an answer here, you may try Stack Overflow or RStudio Community. There must be tons of JS experts out there.

[burgerga]

Another possibility is defining an R variable with "true" or "false" and then using

---
exclude: `r your_variable`

# xaringan

### /ʃæ.'riŋ.ɡæn/

---

[mivalek]

In case anyone is still looking for an answer, I tried the approach @yihui suggested but I couldn't get it to work. Removing elements from the DOM once it is built left a blank/grey space between slides and wasn't updating slide number. (There may well be a way to do it right, I just couldn't figure it out.)

What I wanted was to have two versions of slides in a single file, one presenter version for my lectures and one version to be accessed by studnets.
In the end, the solution was relatively elegant: The slides I only wanted to display when giving the lecture have a exclude: ![:notLive] property.

the live macro was defined in live.js along with code that reads the ?live query from the URL:

const urlParams = new URLSearchParams(window.location.search)
const isLive = urlParams.get('live') === 'true'

remark.macros.notLive = function() {
    return !isLive
}

To enable the hidden slides, all I have to do is put ?live=true in the URL (before #[slide number]).

Writing something that works for @zross should be simple, _e.g._ ?level query that can take values begin or intermed and a couple of marcos that return true or false as needed for the given level:

exclude: ![:begin]

## Not for beginners

- foo

---

exclude: ![:intermed]

## Experts only

- bar

script to include beforeInit

const urlParams = new URLSearchParams(window.location.search)
const level = urlParams.get('level')

remark.macros.begin = function() {
    return level === 'begin'
}

remark.macros.intermed= function() {
    return level === 'intermed' || level === 'begin'
}

Note. defining the macro to return 'exclude: true' and 'exclude: false' and then only putting ![:macro-name] didn't work for some reason I don't understand.

[yihui]

@mivalek That's very clever! I've never thought of using a macro in the exclude attribute. Thanks for sharing!