CODEWITHSUNDEEP
htmlrquarto
Julian
Julian

Reputation: 9260

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! :)

Upvotes: 6

Views: 1181

Answers (1)

Shafee
Shafee

Reputation: 19927

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.

Upvotes: 4

Related Questions