How to insert PDF files into cells as image attachments
- 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
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