Best way to add an icon to a cell in a Python notebook that exports to PDF (Not a Figure with a Figure label)

[entelecheia1963]

Description

I am writing a series of student workbooks for a Machine Learning course using Python and Jupyter Notebooks. I want to publish these into PDF using Quarto. In one version of the exported PDF I want to hide the code (which I see I can do using 'echo: false.

However, I want to indicate to students where they need to fill in the missing code. I am looking for something such as:

1. Including an 'icon' that indicates a place where students need to add their own code cells, or
2. Display a code block - but with the code obscured

I tried just dragging an image into a cell - but then Quarto labels this as a figure - which I don't want.

Any suggestions please?

[mcanouil]

I do not understand the meaning of the title and its link to the content of the post I'am afraid.

What I do understand is that you want to do:

• How to get as an ouput an ipynb document with answers without code (not just with echo: false) #7127

[entelecheia1963]

Mcanouil, Thank you for your fast response .. let me try to explain better...
In many text-books (E.g. 'Dummies Guides', 'Discovering Statistics with R') the author will include a small symbol or icon in the margin to indicate something about the text. In my case, I want to indicate where students should enter Python code. Currently I am doing this ..

Which renders into PDF as this ..

However, ideally what I would want is that image (icon) (1) In the left margin (2) Without the 'Figure' Label and title.

I just want a clear, typographic way of showing students where they need to enter code. Another option would be to display the code block (i.e. black background square) but without the actual text of the code. So this ...

Would render something like this:

(I have edited the program code out of the image here manually)

Actually .. I am flexible. I just need a neat, easy-to-use, easy-to-recognise typography that shows students "This is where you need to enter code based on my previous instructions". I then plan to give these PDFs to students as hand-outs so that they can create their own .ipynb notebooks.

Thank you again for any help.

[entelecheia1963]

I am experimenting by doing this:

But still seeing this in my PDF:

If I could get that image on the left of the page and remove the caption I think I would be good.

[mcanouil]

You need to share code not screenshots.
We can't do anything without some code.

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[entelecheia1963]

I apologise, I thought that what I included above was a screen shot of some quarto code:

This is what I have in my jupyter notebook cells at the top of the jupyter notebook and in the specific cell with the figure:

---
title : Feature Engineering
author : Dr Rob Collins
date: 11/11/2023
format: 
  pdf:
    toc: true
    number-sections: true
    colorlinks: true
highlight-style: zenburn
echo: true
code-overflow: wrap
```{python}
#| fig-align : left
#| fig-cap: ""
![image.png](attachment:image.png)
```

[mcanouil]

1. Nobody can copy/paste from screenshots.
2. For people with disabilities, screenshots can't be read by screen readers.

[entelecheia1963]

I realise my error and will make every endeavour to improve in the future. I guess that I was naïvely hoping that somebody might read the (screen shot of the) code, see my error and point me in the right direction. I hope I have now shared the code in a way that can be copy-pasted and read by people with disabilities. I would like to also apologise to anybody with disabilities who reads this thread and whom I may have inadvertently disadvantaged by my actions.

[cscheid]

Thanks for trying out quarto.

You wrote this:

```{python}
#| fig-align : left
#| fig-cap: ""
![image.png](attachment:image.png)
```

You have a number of mistakes. The triple-tick syntax with {python} in it indicates a python code cell. The contents of that need to be Python code. You're using Markdown syntax in the cell; that will not work. You're using fig-cap syntax indicates to quarto that you want a caption, but you've described in your comments that you want this image to be an icon and not a figure with a figure label; but you've explicitly told quarto to do it, by using "fig-cap". I'll also note that you're using attachment: in the link, which I don't know where you got it from, and is not a Markdown, or Quarto construct.

If you don't mind my unsolicited advice: instead of attempting advanced examples from the start, I think you'd be better served by starting with the tutorials and making sure you understand what's going on in them first: https://quarto.org/docs/get-started/hello/jupyter.html

[entelecheia1963]

Thank you - yes I will look at the tutorials.

I actually did make some progress including and formatting a small image without a caption after your advice. In the end however I decided to use a '.callout-tip' with a short message saying "Add your code here". That looks good on the page and achieves my goal.

Thank you again.