jupyter / jupyter/notebook

How to insert PDF files into cells as image attachments

Open
#5,155 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Jupyter Notebook
Stars
13.3k
Forks
5.8k
Avg merge
6d 11h
Merged PRs (30d)
7

Description

Find the file `.../notebook/static/notebook/js/textcell.js` (or if you don't have the means to minify all the .js code to re-create `.../notebook/static/notebook/js/main.min.js` then just find the file `.../notebook/static/notebook/js/main.min.js`)

Edit the file you found and search for the string `"rendered.MarkdownCell"`. There should be only one copy of that string.

Right above where you found that string, change this block of code:

```
// replace attachment: by the corresponding entry
// in the cell's attachments
html.find('img[src^="attachment:"]').each(function (i, h) {
h = $(h);
var key = h.attr('src').replace(/^attachment:/, '');

if (that.attachments.hasOwnProperty(key)) {
var att = that.attachments[key];
var mime = Object.keys(att)[0];
h.attr('src', 'data:' + mime + ';base64,' + att[mime]);
} else {
h.attr('src', '');
}
});

```
to this:
```

// replace attachment: by the corresponding entry
// in the cell's attachments
html.find('img[src^="attachment:"]').each(function (i, h) {
h = $(h);
var key = h.attr('src').replace(/^attachment:/, '');

if (that.attachments.hasOwnProperty(key)) {
var att = that.attachments[key];
var mime = Object.keys(att)[0];
h.attr('src', 'data:' + mime + ';base64,' + att[mime]);

if (mime == 'application/pdf') {

var new_element = $("");

for (var i = 0; i < h[0].attributes.length; i++) {
var attr = h[0].attributes[i];

if(attr.name == 'src') {
$(new_element).attr('data', attr.value);
} else {
$(new_element).attr(attr.name, attr.value);
}
}

h.replaceWith(function () {
return $(new_element);
});

}

} else {
h.attr('src', '');
}
});

```

After this restart your Jupyter server.

Now any markdown which would have created HTML with an \ tag having the "src" attribute pointing to an attached PDF file will instead create an \ tag having the "data" attribute pointing to the attachment. Your browser will now hopefully invoke a fancy JavaScript PDF viewer to render the object tag.

Contributor guide

Open the contributing guide

Research direction

Open notebook/static/notebook/js/textcell.js, or notebook/static/notebook/js/main.min.js when rebuilding is unavailable, and locate the rendered.MarkdownCell section. Review the attachment-rendering block, then restart the Jupyter server and verify that a markdown PDF attachment displays through an object element instead of an image.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jupyter-notebook
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.