Graphs in lists cause later items to be seen as code blocks

[ryanzomorrodi]

Bug description

When using graphviz or mermaid within a list, the output graph is not indented at all and the text following the list is interpreted as code

See below image:

Steps to reproduce

---
title: "Graph problem"
format: html
---

1.  List item

    a.  list item

        ```{mermaid}
        flowchart LR
          A[Hard edge] --> B(Round edge)
          B --> C{Decision}
          C --> D[Result one]
          C --> E[Result two]

    Look at this graph

b.  List item

or 

```qmd
---
title: "Graph problem"
format: html
---

5.  List item

    a.  list item

        ```{dot}
        digraph {
            1 -> 2
        }

    Look at this graph

b.  List item

### Expected behavior

Graph should be shown indented within the list and text within the list after the graph should be interpreted as normal text

### Actual behavior

Graph is not indented at all and the text within the list should be shown as normal

### Your environment

- IDE: VS Code 1.90.1 and RStudio server 2024.4.2.764
- Ubuntu 22.04 LTS

### Quarto check output

Quarto 1.4.549
[✓] 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.549
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/bin
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: /home/user/Documents/Personal/quarto_test/.venv/bin/python3
      Jupyter: 5.7.2
      Kernels: python3, sas

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

[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /usr/lib/R
      LibPaths:
        - /home/user/R/x86_64-pc-linux-gnu-library/4.4
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.46
      rmarkdown: 2.27

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

[mcanouil]

I can reproduce on 73b59b3f1e6c4278073197e02394ea1f128adfe0. Thanks for the report.

text following the list is interpreted as code

Note that this is because the diagram breaks the list, so the text is taken outside of the list. In Markdown, an indented text means that it is code block. You can see this in GitHub where indented text gets read as code block.

[ryanzomorrodi]

Makes sense. I was uncertain as to what was causing the issue, because it didn't occur with R or python chunks like below

---
title: "no error"
format: html
---

1.  List item

    a.  list item

        ```{r}
        plot(x = 1:4, y = 1:4)

    Look at this graph

b.  List item

[mcanouil]

That's because they are not evaluated the same way (same code path) as diagrams are unrelated to computation/engine.

[cscheid]

We also don't support these declarations anywhere beside the top level of the document. The fact that it more-or-less works is an accident. We should have a warning about this. I'll add to the linter epic.

[cscheid]

(https://github.com/quarto-dev/quarto-cli/issues/8698)

[mcanouil]

In the case of knitr, indented code cell is supported so yes it is an "accident" on Quarto side.

[cscheid]

Quarto doesn't support it in general because Jupyter code cells are not part of Markdown; they're top-level elements at the notebook, and so Quarto takes the approach that every executable code cell needs to be in the top level. This is admittedly unfortunate in the case of diagrams.