Search code examples
rquartoreveal.js

Highlight code lines inside two column layout


I would like to highlight the code line col_names = TRUE in the following revealjs using the extension codefocus, however the highlighted code disappears when using .fragments in combination with codefocus which is not what I want. Does anybody have an idea or different approach?

enter image description here

MWE:

---
title: "Test Highlight"
format: revealjs
execute: 
  echo: true
  
revealjs-plugins:
  - codefocus
---

## A multicolumn slide without highlighting

:::::: {.columns .fragment}
::::: {.column width="50%"}

Some text

Some text

Some text

Some text


::::{.fragment}

::: {.callout-note}
## Note

Some callout
:::

::::

:::::

::::: {.column width="50%"}

:::{.fragment}
### R Code
```{r}
library(readr)

# Import mtcars.csv with read_csv()
df <- read_csv("mtcars.csv",
                col_names = TRUE)
```
:::


:::{.fragment}

### Result

```{r}
head(df[1:3,1:3])
```
:::

:::::
::::::


## A multicolumn slide with highlighting


:::::: {.columns .fragment}
::::: {.column width="50%"}

Some text

Some text

Some text

Some text


::::{.fragment}

::: {.callout-note}
## Note

Some callout
:::

::::

:::::

::::: {.column width="50%"}

::::{.fragment .current-only data-code-focus="5"}
### R Code
```{r}
library(readr)

# Import mtcars.csv with read_csv()
df <- read_csv("mtcars.csv",
                col_names = TRUE)
```
::::

::::{.fragment}

### Result

```{r}
head(df[1:3,1:3])
```
::::

:::::
::::::

Solution

  • Using the chunk options code-line-numbers as a string does work:

    :::{.fragment}
    ### R Code
    ```{r}
    #| code-line-numbers: "5"
    library(readr)
    
    # Import mtcars.csv with read_csv()
    df <- read_csv("mtcars.csv",
                    col_names = TRUE)
    ```
    :::