Highlighting and discussing code lines at once

[reuning]

Using RevalJS I was wondering if it is possible to step through line highlights and provide commentary for each line. Below is an example of my attempt to do this, but it doesn't work out the way I want--the non-code fragments all appear in between changing line highlights.

I added slashes so that it wouldn't work

## My Solution 

```{.R code-line-numbers="2|3"}
iris %>% 
    drop_na(Species) %>% 
    group_by(Species) %>%
    summarize(n=n(), mean=mean(Sepal.Width, na.rm=T),
            median=median(Sepal.Width, na.rm=T))
```

::: {.fragment .fade-out fragment-index=1}
Filtering out missing values
:::

::: {.fragment fragment-index=1}
Grouping by missing values
:::

[cderv]

Stepping through code and fragment are both reveal.js native feature. Quarto only handles the support and improved markdown syntax.

It seems those two features don't work well together and I don't know if something like is possible in reveal.js.

Maybe using reveal.js hooks, something can be built in JS 🤔

One trail to follow would be to look into reveal.js community if someone has made something like that working. If so we could support, otherwise it would need to be develop.

Thanks for the idea!

[shafayetShafee]

YESS!!, I am in the same position but got my whole interest in this plugin for now 😂

[cderv]

This is a really cool plugin ! I would love to see that as a Quarto extension ! It is not among known RevealJs quarto extensions I believe (from this list https://github.com/mcanouil/awesome-quarto#extensions)

Do not hesitate to ping me for any help if needed. 😉

[shafayetShafee]

@cderv, I need your help actually. I have implemented the plugin as a custom format codefocus successfully but I am not sure how to implement this as a plugin as described in quarto doc. I have tried to give a detailed description of my problem and so far what I did in the repo readme.

Thanks 😊🙏

[cderv]

great. I'll have look as soon as possible

[shafayetShafee]

Thank you so much 😊

[reuning]

So I put together a plugin here. https://github.com/reuning/codefocus

Lord knows that it has been 15 years since I took a college course on JavaScript. But it seems to work, it uses the line-highlight css to try to keep some consistency. I also checked that it doesn't seem to cause any problem with using line-highlight in other parts of your presentation. Any thoughts/feedback welcome. Though I should probably but this down for a bit.

[reuning]

@cderv if you have a moment, I'm having trouble installing it off of github. When I run quarto add reuning/codefocus I get Extension not found in local or remote sources. I've tried also quarto install extension reuning/codefocus and get the same issue.

I've tried this from my macbook and windows computer. I can clone the github repo fine. I feel like there is something silly I'm missing here.

[dragonstyle]

It looks to me like the issue is that we're expecting a branch named main and not handling it super gracefully. I think this should be pretty straightforward as Github provides UI for this now.

Would renaming the default branch be possible for you?

[reuning]

That fixed it. Thank you.

[dragonstyle]

Awesome! I'm not sure if there is a better way for us to discover the default branch name so for the time being we just always assume main. Glad this got things up and running!

[cderv]

@reuning and @shafayetShafee pretty quick on project! Nicely done. Sorry I did not have time to look at it yet as onto something right now, but it seems it is sorted out and reuning/codefocus is the extension for this.

Great to have such community with us ! Thank you!