Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I convert <img> tags in markdown cells when exporting in Jupyter?

I've got a large report-like notebook which has got many images. Instead of using the ![title](link) syntax, I've had to use <img src="link" align="right" width=100> instead, so I have better control on them.

While this works inside the notebook in Jupyter Server, the inline <img> tags get rendered verbatim, instead of showing up as images.

I figure the problem resides with the nbconvert module which handles the conversion, but it seems as though a similar issue has already been resolved.

My links were originally linking directly to http:// links, but I've pulled them all locally, and am still getting verbatim HTML code instead of images.


In Jupyter vs rendered HTML


  • Jupyter version: 4.2.1
  • nbconvert version: 5.2.1
  • Python: 3.6.1
  • Distribution: Anaconda
  • Platform: Windows
like image 805
François Leblanc Avatar asked Jul 21 '17 19:07

François Leblanc


2 Answers

As discussed in this issue this may be related to how mistune (which nbconvert uses) parses html attributes. What version of mistune do you have?

If you have mistune 0.7.3 you will run into the following:

In [1]: import mistune

In [2]: mistune.markdown('\n <img src="link" align="right" widt
   ...: h=100>  \n', escape=False)
Out[2]: '<p>&lt;img src="link" align="right" width=100&gt;</p>\n'

In [3]: mistune.markdown('\n <img src="link" align="right" widt
   ...: h="100">  \n', escape=False)
Out[3]: '<p><img src="link" align="right" width="100"></p>\n'

In [4]: mistune.__version__
Out[4]: '0.7.3'

Whereas 0.7.4 provides:

In [1]: import mistune

In [2]: mistune.markdown('\n <img src="link" align="right" widt
   ...: h=100>  \n', escape=False)
Out[2]: '<p><img src="link" align="right" width=100></p>\n'

In [3]: mistune.markdown('\n <img src="link" align="right" widt
   ...: h="100">  \n', escape=False)
Out[3]: '<p><img src="link" align="right" width="100"></p>\n'

In [4]: mistune.__version__
Out[4]: '0.7.4'

If you add quotes to your html attributes – e.g., <img src="link" align="right" width="100"> – that may fix the problem.

like image 72
mpacer Avatar answered Nov 18 '22 21:11

mpacer


Downgrading mistune solves the problem for me.

conda install mistune=0.7.2
like image 1
Frank Wang Avatar answered Nov 18 '22 22:11

Frank Wang