[Q&A]: Is there a way to use quarto-webr code chunks in document rendered by Hugo?

[ClaudiuPapasteri]

What's your question?

Thank you for the excellent extension. It works great when rendered by Quarto into html, but renders to regular unevaluated code chunks when rendered by Hugo. The .qmd is first rendered to format format: hugo-md and then Hugo renders it to html. As per official docs, the workflow is:

index.qmd   Quarto =>   index.md   Hugo =>   index.html

A minimal example .qmd used with Hugo would look like this:

---
title: Minimal example
date: '2024-02-03'
slug: min-eg-slug
categories:
  - R
tags:
  - R
format:
  hugo-md:
    code-fold: false
execute: 
  warning: false
engine: knitr
webr: 
  show-startup-message: false 
filters:
  - webr  
---

```{webr-r}
message <- c(
  "I ran the code chunk",
  "I already knew what was going to happen",
  "I still wanted to test it"
)

sample(message, size = 1)

Which renders to identical .md and even if I change the .md's yaml format to format: html, the html rendered by Hugo will display only a static code chunk:

I figure this is an issue with Hugo not knowing how to deal with {webr-r}, but is there an elegant solution to this?

Thank you.

[coatless]

@ClaudiuPapasteri thanks for the question. So, what's going on here is Hugo is grouped under the output format of markdown, not html. So, the final output is given as a .md instead of .html. Thus, when we run our check for supported formats:

https://github.com/coatless/quarto-webr/blob/1381e3764d0d54a8b51e5d670b0e3765087372dd/_extensions/webr/webr.lua#L529-L533

None of the webr-r components are added into the document. If I modify that line to allow the markdown format, then we get the necessary injections; but, they are not being placed into the "head" of the document.

This is problematic for our initialization of Monaco Editor. So, I'm not hopeful that this can be extended into hugo.

I've spun up a branch with the necessary change, could you try it with your hugo installation?

quarto add coatless/quarto-webr@test-hugo-md

[coatless]

Oh, and please make sure to include in the hugo.toml/site config the following:

[markup.goldmark.renderer]
unsafe=true

[ClaudiuPapasteri]

It works perfectly. See the result in my blog post about using your quarto-webr extension with Quarto within a blogdown blog built by Hugo. Maybe it can be a good reference for others (didn't fine any other docs or materials on the topic).

[coatless]

@ClaudiuPapasteri awesome to hear! Thank you so much for trying it out. I'll merge in the test branch so it should work directly on the main branch.

[coatless]

@ClaudiuPapasteri

P.S. by default, we're already shimming webr::install() to install.packages(). No need to expose that :)

I'll also probably try and enable the status header; but, that won't happen until 0.4.1 / dev.

[coatless]

@ClaudiuPapasteri in main now. Thanks again for raising the issue and writing up the post!