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 , 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
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)
I got prompt answers William Stein and Harald Schilly at CoCalc when I posted a support request. Here is my answer.
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.
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:
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.
Create a file style.css and run pandoc from the commandline using
pandoc Example.md -s --css="style.css" --mathjax -o Example.html
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.
Related
I am in Visual Studio Code and I have created the following jupyter notebook:
I would like to know how to remove or modify the pdf header (circled in red below) produced when I export this notebook to pdf with VSCode.
I know this is a similar header to a latex document produced with \maketitle, but I don't know how to remove it or how to change the title, add authors or change the date. I would also like to know how to reduce the margins of the pdf produced (in my latex document I use \geometry for).
Thanks for your help :
In fact, the best way to convert jupyter files to PDF is not through vsocd or notepad. We can open jupyter files through Chrome browser, and then convert them to PDF by printing, so that no title can be adjusted, and row spacing can be adjusted in print.
I didn't find a satisfying solution: you would have to edit the notebook's metadata (in JSON).
For now, I:
export the notebook as LaTeX source (e.g. jupyter-nbconvert --to latex my_notebook.ipynb)
edit the generated .tex file to adjust title and author.
compile it to pdf (pdflatex or your favorite tool).
I searched a lot for this issue but didn't come to any straight to the point answer, so I am turning to you here and hopefully someone can help direct me to the right path at least.
The issue is simple, I have normal jupyter Nb and I would like to share it with others by sending them html format file. Using the normal !jupyter nbconvert --to html mynotebook.ipynbwill get the html export, but recently I started getting output with very wide screen (it uses the monitor screen).
How can I change the output screen size to maintain the same configurations even after exporting it to html?
In case my explanation wasn't clear I will add pictures:
notebook before exporting:
After exporting:
I don't want to create any special template, I just want to maintain the same parameters before exporting i.e. the width of the cells (inputs and outputs). Most of the answers I found here was talking about creating my own template or running some css code (both I don't have knowledge in...). Is there a ready to use template or argument that I can use to maintain the same layout?
I ran into the same issue. I think the problem might be that --to html uses the Jupyter Lab template by default. Once I added --template classic to my call to nbconvert the resulting HTML-file was much smaller and resembled the actual Jupyter notebook much more closely.
I am using Pygraphviz library with python 2.7. I'm generating 'svg' output images. What I like to do is to use an 'svg' image as the label of my graphs. To do that, I am using the html tag (http://www.graphviz.org/doc/info/shapes.html#html).
Here is the part of my code that is responsible to do that:
dot = Digraph(comment=zone)
dot.graph_attr['label'] = "\
<\
<TABLE>\
<TR>\
<TD><IMG SRC=\"/path/to/svg/image\"/></TD>
</TR>
</TABLE>
>"
The svg output image is created but my svg logo is not displayed; the table is empty)
Any ideas?
I know this is a very old question, but as this is the first result on google and I stumbled over this as well I thought I'd share:
You can open the *.svg with a text editor to check that the links are there and point to the correct location xlink:href="/path/to/svg/image" (which was the case for me)
Make sure to open it with an application that actually loads the images (e.g. firefox, chrome, inkscape). The default image viewer in gnome, GIMP, Krita, etc. open the image just fine, but don't load the images by default, resulting in an empty table/node.
I'm using Jupyter notebook to write up my report using Markdown and Python to make widgets.
On the Jupyter notebook, when I click on "file", then "Download as" HTML(.html), it converts my notebook.
In the html, I noticed that none of my widgets appear, and any images I've attached by markdown as <img src="myimagehere.png"> also disappear.
Only the actual code, " appears, not the image itself.
P.S. I also just noticed that the markdown mathematical notation like Latex suddenly appears as only code in html. So three problems in one, wonderful.
Been struggling to find an answer/solution. Can anyone please help? Many thanks.
I am using Ipython Notebook and I would like to save the notebook as pdf. When a notebook contains html figures in markdown mode I cannot export them
In example:
<img src='http://draftingmanuals.tpub.com/14262/img/14262_140_2.jpg'>
represents the following:
However, when I download the notebook as PDF via LaTeX (pdf) the result is without the figure:
Is this a bug or can I avoid this somehow?
This is not really a bug, but a known limitation. Actually there are two issues in your example:
the raw html <img> tag gets stripped when the markdown cells are converted by pandoc to latex (see pandoc docu).
you link to a remote image, which is (currently) not downloaded prior to the conversion.
Thus, it is a bit tricky to get what you desire. The first issue may be overcome by means of a custom filter and custom template. For the second, you may need a custom preprocessor.
Alternatively, you could use python with urllib (e.g. Downloading a picture via urllib and python) and matplotlib to display this image. Such embedded images are converted fine.