Jupiter: nbconvert does convert HTML image to LaTex

Question

I love using jupyter notebooks to document topics for my physics course, so I am having my students use CoCalc and either Markdown or Jupyter notebook to write their lab reports. I have a problem.

In a jupyter notebook, the Markdown way to insert an image is ![Two slit](twoSlit1.png), for example. However you can not control the size, location and wrapping. Stack Exchange helpfully has many suggestions [here] to control the size 1.

However, when I try to convert it to pdf, the images get lost if they are inserted using HTML. For example

![Two slit](twoSlit1.png)

converted with jupyter nbconvert Example.ipynb --to html works fine, but with no control over image size of placement. I can then print this to pdf, but it does not have a good "document" look. But

<img align="right" src="twoSlit1.png" width="200" />

converted with jupyter nbconvert Example.ipynb --to pdf gives a pdf rendering, but the images are missing. I tried many different HTML image codings, but none work with nbconvert --to pdf

The CoCalc File -> Download as PDF via LaTex (.pdf)... does note render the images either.

I get similar results on CoCalc if I create a Markdown document and use pandoc Example1.md -o Example1.pdf to create a pdf file.

BTW, both render the equations perfectly.

I also get the same results on my Mac running jupyter locally (Anaconda distribution, python 3.7)

Answer 1

I got prompt answers William Stein and Harald Schilly at CoCalc when I posted a support request. Here is my answer.

1. The issue is that the Markdown (and probably the jupyter notebook Markdown cells) Preview pane is rendered in the frontend, not using pandoc in the backend, so when I used pandoc from the terminal I got a different result.

2. I could get HTML that looks reasonable by putting a HTML <style> tag at the beginning of the Markdown document and putting CSS code in the <style> tag. Then I put my image in an HTML <div> that used the CSS to set its size, float it right, add a caption, etc. I also reduced the size of the header fonts, set the font-family to serif, etc in the CSS file. Then the Preview looked OK, but there were still problems when I printed the Preview and saved it as pdf. So:

3. Just use Markdown and use HTML for just a few things: a) A <div class="center"> to center the title, author, ... b) <blockquote> to style the abstract. c) A <div class=figure width="280px"> to insert floating figures.

4. Create a file style.css and run pandoc from the commandline using

   pandoc Example.md -s --css="style.css" --mathjax -o Example.html
   

5. Open Example.html in CoCalc and use the print icon in the rendered pane and save the pdf file.

I am satisfied. The students can get decent reports without the extra labor of working with LaTeX and with a minimum of HTML. I give them the CSS file.