Why is `asis` output rendered as monospace?

[fkohrt]

Bug description

When setting the chunk option results: "asis" or output: "asis", the results are rendered in monospace, although I would expect them to be treated as raw HTML without any additional styling.

Steps to reproduce

---
title: Test
format: html
engine: knitr
filters:
  - webr
---

```{webr-r}
#| results: "asis"
#| output: "asis"
#| context: "output"

cat('<em>This</em> is an example.\n')
```

Your environment

• Fedora 39
• Firefox 123.0.1

Quarto check output

quarto check

Quarto 1.4.551
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.551
      Path: /home/<USER>/bin/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/local/texlive/2022/bin/x86_64-linux
      Version: 2022

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /usr/bin/python3
      Jupyter: 5.7.1
      Kernels: ir, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.3
      Path: /usr/lib64/R
      LibPaths:
        - /home/<USER>/R/x86_64-redhat-linux-gnu-library/4.3
        - /usr/local/lib/R/library
        - /usr/lib64/R/library
        - /usr/share/R/library
      knitr: 1.45
      rmarkdown: 2.26

[✓] Checking Knitr engine render......OK

[coatless]

@fkohrt thanks for raising the issue. No matter what the results will be treated with Quarto's HTML styling. The main difference with results: 'asis' and output: 'asis' is allowing HTML in R to propagate into a working HTML output (e.g. not escaped).

On the raw styling, this can be achieved by specifying values for .qwebr-output-code-stdout and .qwebr-output-code-stderr CSS classes.

[fkohrt]

@coatless Thanks for your fast response!

To me it still feels like the current behavior is a bug, as I reckon {webr-r} chunks should behave similar to {r} chunks. With {r} chunks, output: "asis" is not wrapped in <pre> or <code> tags and no classes (e.g., cell-output-stdout) are applied.

More details

{r} chunks

Full test-r.qmd

---
title: Test {r}
format: html
engine: knitr
---

```{r}
#| output: true
#| echo: false

cat('<em>This</em> is an example.\n')
```

```{r}
#| output: "asis"
#| echo: false

cat('<em>This</em> is an example.\n')
```

```{r}
#| output: true
#| echo: false

cat('<em>This</em> is an example.\n')
```

Resulting HTML

<div class="cell">
<div class="cell-output cell-output-stdout">
<pre><code>&lt;em&gt;This&lt;/em&gt; is an example.</code></pre>
</div>
</div>

```{r}
#| output: "asis"
#| echo: false

cat('<em>This</em> is an example.\n')
```

Resulting HTML

<p><em>This</em> is an example.</p>

Note that the output is not wrapped in <pre> or <code> tags and no classes (e.g., cell-output-stdout) are applied.

{webr-r} chunks

Full test-webr-r.qmd

---
title: Test {webr-r}
format: html
engine: knitr
filters:
  - webr
---

```{webr-r}
#| output: true
#| context: "output"

cat('<em>This</em> is an example.\n')
```

```{webr-r}
#| output: "asis"
#| context: "output"

cat('<em>This</em> is an example.\n')
```

```{webr-r}
#| output: true
#| context: "output"

cat('<em>This</em> is an example.\n')
```

Resulting HTML

<div id="qwebr-output-code-area-1" class="qwebr-output-code-area" aria-live="assertive"><pre><div><code id="qwebr-output-code-stdout-editor-1-result-1" class="qwebr-output-code-stdout">&lt;em&gt;This&lt;/em&gt; is an example.</code></div></pre></div>

```{webr-r}
#| output: "asis"
#| context: "output"

cat('<em>This</em> is an example.\n')
```

Resulting HTML

<div id="qwebr-output-code-area-2" class="qwebr-output-code-area" aria-live="assertive"><pre><div><code id="qwebr-output-code-stdout-editor-2-result-1" class="qwebr-output-code-stdout"><em>This</em> is an example.</code></div></pre></div>

Just targeting .qwebr-output-code-stdout with CSS is not sufficient. The following CSS...

.qwebr-output-code-stdout {
  font-family: sans-serif;
}

...applies equally to all output chunks, not only to those which have results: "asis" or output: "asis".

[fkohrt]

In any case, thank you so much for putting the effort into developing and maintaining these great Quarto extensions, it feel's awesome to mix webR and Pyodide in the same document!

[coatless]

Hmm, I see what you're getting at.

Thinking a bit... We must provide some structure to the output so that it falls into our output area:

<div id="qwebr-output-code-area-2" class="qwebr-output-code-area" aria-live="assertive">
<pre>
<div>
# Results must appear here
</div>
</pre>
</div>

The <code> portion containing the highlighting for STDERR and STDOUT can be removed by modifying the following:

quarto-webr/_extensions/webr/qwebr-compute-engine.js

Lines 117 to 129 in ebcad68

	// Merge output streams of STDOUT and STDErr (messages and errors are combined.)
	// Require both `warning` and `message` to be true to display `STDErr`.
	const out = result.output
	.filter(
	evt => evt.type === "stdout" ||
	( evt.type === "stderr" && (options.warning === "true" && options.message === "true"))
	)
	.map((evt, index) => {
	const className = `qwebr-output-code-${evt.type}`;
	const outputResult = qwebrPrefixComment(processOutput(evt.data), options.comment);
	return `<code id="${className}-editor-${elements.id}-result-${index + 1}" class="${className}">${outputResult}</code>`;
	})
	.join("\n");

Thinking more, another option would be to add a CSS class directly to the output area if the cell is flagged as asis.

Note

You can add custom CSS classes to the entire cell by using the classes option, e.g. #| classes: class1 class2.
So, you potentially can highlight the cell to get around the current CSS snafu.