Convert notebook to a standalone markdown

Notebook nbconvert
1

Hi. Can I use nbconvert --to markdown to write all the generated images in the notebook as their data URIs instead of writing them to disk?

I want to be able to share the notebook on discourse forums.

1 Like
2

A nice option to share an entire previously run notebook in static form is to post the notebook as a Github gist and link to it.
You can then even paste the gist URL into nbviewer and use the link it generates in the resulting view, if you prefer those interested get directed to the cleaner interface / nicer rendering.

Additionally, by already having it as a Gist (or in Github repo), once a user is viewing it via nbviewer, that user can click on the MyBinder logo (three rings interwoven) in the upper right & open that as an active notebook via MyBinder. Then if they know what they are doing, the interested user can be working with your notebook without needing to download anything. I say ‘if they know what they are doing’ because they may need to install packages via %pip install or %conda install if you didn’t go the extra mile to include Binder-compatible configuration files.

3

Yes, they’re options I’ve considered. However, I want to be able to display the run notebook statically without redirecting the user to a third party.

4

There was a suggested feature around supporting outputing to gists in nbconvert. This was for code snippets but I could see a feature being added to push outputs in a similar fashion. Today I’m not aware of a tooling setup that will do this for you without a third-party redirect.

1 Like
5

Alright. In that case, can I get a clue for where I should look to implement something like this myself?

Right now, my concern is only converting images to data URIs to make the resulting markdown output standalone.

6

Are you sure discourse allows data: URIs? See Danie’s B answer here for discussion related to that issue. If it allows it you can parse out the base64 encoded data from a saved notebook .json file.

7

Okay. I think I have what I need to move ahead.

Still curious about how GitHub gists or .ipynb files render images for notebooks in markdown though. Or maybe they convert to html with data URIs instead of markdown.

8

@areebbeigh If you run nbconvert with --ExtractOutputPreprocessor.enabled=False it will embed the images inline in the markdown output fyi.

1 Like
9

If you wanted to look more into gists, you’ll need too look at the markdown/index.md.j2 file in how it handles images. You’d need to add a markdown2gist filter to the filters/markdown.py file and then test that function to post a gist and return the markdown linking to it.

1 Like
10

i have same need, and found by replacing
![png](output_3_0.png)
to
<img src=“data:image/png;base64,iVBO…”>

image is successfully embedded to markdown file

i will write a python script to do this replace.

11

convert script:

#! python3
import os
import re
import binascii

srcfil = r'C:\Users\WMX\Desktop\pylab\pylab.md'

srcdir = os.path.dirname(srcfil)
dstfil = os.path.join(srcdir, os.path.basename(srcfil).replace('.md', '_emb.md'))

img_base64 = {}
for root, dirs, files in os.walk(srcdir):
    for fname in files:
        if fname.endswith('.png'):
            img_data = open(os.path.join(root, fname), 'rb').read()
            img_base64[fname] = f'<img src="data:image/png;base64,{binascii.b2a_base64(img_data, newline=False).decode("latin-1")}">'

content = open(srcfil, 'r', encoding='utf-8').read()
for img in img_base64:
    content = re.sub(f'\n!\[png\]\({img}\)\n', f'\n{img_base64[img]}\n', content)

open(dstfil, 'w', encoding='utf-8').write(content)
1 Like