Including HTML blocks for ipynb format

[linogaliana]

Hi !

Context

I am trying to generate some content in ipynb output to generate some callout boxes in Jupyter Notebook (a provisory version before #1167 solves the issue). In Jupyter, you can visualise boxes using div with alert class. For instance, the following code:

<div class="alert alert-danger" role="alert">
Il faut faire attention au `display` et aux
commandes qui révèlent des données (`head`, `tail`, etc.)
dans un notebook ou un markdown qui exploite
des données confidentielles lorsqu'on utilise `git`. En effet, on peut se
retrouver à partager des données, involontairement, dans l'historique
`git`. Avec un `R markdown`, il suffit d'ajouter les sorties au fichier
`gitignore` (par exemple avec une balise de type `*.html`). Avec un
notebook `jupyter`, la démarche est plus compliquée car les fichiers
`.ipynb` intègrent dans le même document, texte, sorties et mise en forme.
Techniquement, il est possible d'appliquer des filtres avec `git`
(voir
[ici](http://timstaley.co.uk/posts/making-git-and-jupyter-notebooks-play-nice/))
mais c'est une démarche très complexe
</div>

yields :

My questions goes beyond the issue of creating callout boxes (since #1167 that is in Future milestone is supposed to solve that) but is more related to the presence of html blocks when qmd -> ipynb.

Question 1

In my .qmd if I put the below text:

<div class="alert alert-danger" role="alert">
Il faut faire attention au `display` et aux
commandes qui révèlent des données (`head`, `tail`, etc.)
dans un notebook ou un markdown qui exploite
des données confidentielles lorsqu'on utilise `git`. En effet, on peut se
retrouver à partager des données, involontairement, dans l'historique
`git`. Avec un `R markdown`, il suffit d'ajouter les sorties au fichier
`gitignore` (par exemple avec une balise de type `*.html`). Avec un
notebook `jupyter`, la démarche est plus compliquée car les fichiers
`.ipynb` intègrent dans le même document, texte, sorties et mise en forme.
Techniquement, il est possible d'appliquer des filtres avec `git`
(voir
[ici](http://timstaley.co.uk/posts/making-git-and-jupyter-notebooks-play-nice/))
mais c'est une démarche très complexe
</div>

when using quarto render index.qmd --to ipynb, the blocks <div class="alert alert-danger" role="alert"> and </div> are not included in my index.ipynb. Thus, I just end up with an unformatted markdown cell with the text I wanted in the box.

Is the disappearance of <div ...> and </div> an expected behavior ?

Question 2

I then tried to change div by p just to see what happens. It yields the same red box in a test.ipynb draft in a local Jupyter session. However, if I put the text in .qmd file:

<p class="alert alert-danger" role="alert">
Il faut faire attention au `display` et aux
commandes qui révèlent des données (`head`, `tail`, etc.)
dans un notebook ou un markdown qui exploite
des données confidentielles lorsqu'on utilise `git`. En effet, on peut se
retrouver à partager des données, involontairement, dans l'historique
`git`. Avec un `R markdown`, il suffit d'ajouter les sorties au fichier
`gitignore` (par exemple avec une balise de type `*.html`). Avec un
notebook `jupyter`, la démarche est plus compliquée car les fichiers
`.ipynb` intègrent dans le même document, texte, sorties et mise en forme.
Techniquement, il est possible d'appliquer des filtres avec `git`
(voir
[ici](http://timstaley.co.uk/posts/making-git-and-jupyter-notebooks-play-nice/))
mais c'est une démarche très complexe
</p>

this will generate three different blocks in my ipynb:

• block 1: <p class="alert alert-danger" role="alert"> in a raw cell
• block 2: inner content of the box in a markdown cell
• block 3: </p> in a raw cell

If everything were in the same cell, the formatting would have worked.

I see that each time quarto encounters a <p> and </p> , it creates a separated raw cell (instead of a markdown cell). Once again, is it an expected behavior ?

Other approach tried

I tried to use the Rmd's custom block functionality:

::: {#mybox .alert .alert-danger}
Il faut faire attention au `display` et aux
commandes qui révèlent des données (`head`, `tail`, etc.)
dans un notebook ou un markdown qui exploite
des données confidentielles lorsqu'on utilise `git`. En effet, on peut se
retrouver à partager des données, involontairement, dans l'historique
`git`. Avec un `R markdown`, il suffit d'ajouter les sorties au fichier
`gitignore` (par exemple avec une balise de type `*.html`). Avec un
notebook `jupyter`, la démarche est plus compliquée car les fichiers
`.ipynb` intègrent dans le même document, texte, sorties et mise en forme.
Techniquement, il est possible d'appliquer des filtres avec `git`
(voir
[ici](http://timstaley.co.uk/posts/making-git-and-jupyter-notebooks-play-nice/))
mais c'est une démarche très complexe
:::

hoping to end-up with that block in my ipynb :

<div class="alert alert-danger">
Il faut faire attention au `display` et aux
commandes qui révèlent des données (`head`, `tail`, etc.)
dans un notebook ou un markdown qui exploite
des données confidentielles lorsqu'on utilise `git`. En effet, on peut se
retrouver à partager des données, involontairement, dans l'historique
`git`. Avec un `R markdown`, il suffit d'ajouter les sorties au fichier
`gitignore` (par exemple avec une balise de type `*.html`). Avec un
notebook `jupyter`, la démarche est plus compliquée car les fichiers
`.ipynb` intègrent dans le même document, texte, sorties et mise en forme.
Techniquement, il est possible d'appliquer des filtres avec `git`
(voir
[ici](http://timstaley.co.uk/posts/making-git-and-jupyter-notebooks-play-nice/))
mais c'est une démarche très complexe
</div>

As in question 1, <div ...> and </div> are not present.
This pandoc's fenced div block is not implemented in quarto (for ipynb output at least) ?

[mcanouil]

Did you try to include your HTML code in an HTML code block?

```{=html}
CODE
```

[mcanouil]

I see.
Then the trick used in #1349 might help, i.e., you "print" the content in a code-cell and output it "asis".

PS: I ave to admit I don't understand your use case here (maybe I missed something). Why use Quarto to make Jupyter notebook? 🤔
Also a small complete reproducible example will help finding the proper answer.

[cderv]

@linogaliana just for context, this syntax is a Pandoc feature called raw_attributes https://pandoc.org/MANUAL.html#extension-raw_attribute and also working in R Markdown document https://bookdown.org/yihui/rmarkdown-cookbook/raw-content.html
Useful to add raw content for an output, but yes in the AST it will change the type of the whole block.

[linogaliana]

Thanks @mcanouil for your help.

Below you can find a small reproductible example.

Regarding my use case. I think quarto is a great tool to handle website generation and create multiple output from the same source file. I use quarto to generate a Python course website. I want my students to be able to run easily the code I provide but also complete the chapters with their own notes. I have the personal opinion that ipynb is a great final product for communication if we want people to reuse some codes or exercise themselves from provided guildelines.

I could provide my students directly with the source .qmd file. However, for some exercises, that would directly give them the answer (I guess some of them would be happy about it 🤓). Also, I am pretty sure my students will encounter .ipynb files when they will go to the labor market (or sometimes are already familiar with notebook), not .qmd yet. For an introductory course on Python, I guess I cannot avoid proposing them exercises in Jupyter even if its cumbersome for me. My idea is to provide them the same content than the website but more interactive thanks to Jupyter.

Reproducible example

Content of example.qmd:

---
title: "Example file"
date: 2022-08-24
---

An example file of quarto generated `ipynb` output.

Including Jupyter box using html block

```{=html}
<div class="alert alert-danger" role="alert">
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
</div>
```

[cderv]

@linogaliana Another piece of context that can help understand what is going on.

By using --to ipynb I believe you are using the Pandoc feature to convert to Jupyter Notebook format. The documentation of Pandoc contains useful information https://pandoc.org/MANUAL.html#jupyter-notebooks, especially why raw HTML is needed, and some potential workaround. My understanding is that fenced div is used to indicate the structure in the jupyter notebook. So the div you insert is probably interpreted as a Div for the structure and class not match to known one, so it is ignored. Using raw block is a way to avoid that. See the doc above for explanation, but here is something that maybe could be what you want based on the Pandoc's doc

---
title: "Example file"
date: 2022-08-24
format:
  ipynb: default
---

An example file of quarto generated `ipynb` output.

Including Jupyter box using html block

::: {.cell .markdown}
```{=html}
<div class="alert alert-danger" role="alert">
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
</div>
```
:::

Also, in case you don't know about it for your usage, there is a quarto convert command that could be useful to transform a qmd file to its ipynb version (https://quarto.org/docs/computations/python.html#jupyter-lab). It is not a Pandoc conversion but a way to use Jupyter Lab and ipynb to write Quarto documents.

Hope it helps

[linogaliana]

Thanks @cderv for the context and the proposition. The ::: {.cell .markdown} solution worked like a charm ! It even helps to integrate complex content within the cell (see an example below). Result is not as beautiful as would have been a transposition of the quarto's callout boxes but at least it is functional