Search code examples
htmlrquarto

How to highlight specific code lines in a .qmd html file

Has someone found a way to highlight specific code lines in quarto html documents (similar to the reveal.js code highlighting option?). For instance, in the following example I would like to highlight the newly added group_by() code line:

---
format: html
---

```{r}
library(dplyr)
iris |> 
  summarize(mean(Sepal.Length))
```

Add `group_by()`:

```{r}
iris |> 
  group_by(Species) |> 
  summarize(mean(Sepal.Length))
```

I found this package which, however, only works for RMarkdown. Any hints are much appreciated! :)

Solution

  • I have created a small Quarto filter extension line-highlight to enable line highlighting (both for source code and output) in HTML output format (i.e. format: html).

    To highlight a specific line of source code, you need to use the chunk option source-line-numbers which takes values similarly as code-line-numbers. Note that, this filter extension requires Quarto v1.2 at least to work.

    So in your given example, to highlight the newly added group_by() code line, we can do the following (additionally, we can use class-source: "numberLines" to enable source code chunk line numbering),

    ---
format: html
filters: 
  - line-highlight
---


```{r}
#| message: false
#| source-line-numbers: "4"

library(dplyr)

iris |> 
  group_by(Species) |> 
  summarize(mean(Sepal.Length))
```


```{r}
#| class-source: "numberLines"
#| source-line-numbers: "2"

iris |> 
  group_by(Species) |> 
  summarize(mean(Sepal.Length))
```

    line highlighting

    See the github repository for more examples and the installation process.