Hyperlink that can lead to a pdf in Jupyter notebook - jupyter-notebook

I'm working with Jupyter notebook and have a question in mind:
If I want to markdown an HTML file or any website, I can just simply do
[name-of-the-website](address-here)
and it will create a link to the page that I want to reference
My question is
Are there any markdown code for PDF reference
IS the code the same with HTML reference (whenver I click into the markdown link, It will create a new tab which can download the file to the computer)
P/s: I'm not talking about coverting the notebook into PDF file

I have found out an answer:
Go to the file PDF that you want to download, for example I want to download this PDF file
Ideas:
Because there should be a HTML link to download the document, if one can find this link, then can proceed to normal markdown HTML file in Jupyter Notebook
Steps:
On the browser, right-click that PDF download link, and then choose Inspect Element (Q) (on Firefox or any browser in use)
It is then open the console that will shown the download HTML file like shown:
href="http://www.montefiore.ulg.ac.be/services/stochastic/pubs/2009/DMWG09/dumont-visapp09-shortpaper.pdf"
One can proceed with normal markdown in Jupyter Notebook

This works for me:
ref.
This is a relative path to the file.

Related

How to view a markdown file in jupyter lab properly?

How to view a markdown file in Jupyter lab properly?
The readme file of a git project is written in markdown, as usual. How can one properly view it in Jupyter lab (rendered)? Currently I see the text version only.
A good solution is shown here in the
youtube video
Open the file, right click on the content, "Show markdown preview"
Right click on the open markdown text editor area and you should get a menu option "Show markdown preview". Select that and it will render the text into markdown in another window (side by side by default)

Unable to view plots on GitHub using md file

I created a R markdown file on R Studio enter image description here and used the Knit function to create an html file. Eventually, .md file and html files were created in my working directory. Also, a figures folder/directory was created automatically. And hence, I pushed all the changes made to my GitHub repository.
Now, my problem here is when I open the .md (markdown) file on GitHub, it doesn't view the plots
enter image description here
You have to push images to the GitHub repo. Images cannot be viewed because they are missing.

How to show image from folder in google colab

How can I show the pictures from folder figures in google colab inline in a markdown cell?
I have the following structure of notebooks on my local drive.
figures
- pic1.png
- pic2.png
- ...
Notebook1.ipynb
Notebook2.ipynb
etc.
After opening a Notebook in google colab and uploading the figures folder, I checked that the folder with pictures is actually uploaded. It is.
I then tried the following in a markdown cell:
![Pic1](figures/pic1.png)
This apparently doesn't work in google colab.
How did Jake VanderPlas do this here? Apparently he didn't even upload the pictures into a folder "figures" but still uses the following line in markdown
![Broadcasting Visual](figures/02.05-broadcasting.png) in the above link (scroll down to see a picture on numpy arrays).
Any help is appreciated!
Thanks!
GitHib image references are resolved relative to the repo.
For notebooks stored in Drive, you'll need to embed the image in the notebook. Here's an example:
https://colab.research.google.com/drive/1jWHKR6rhhyZtUulttBD6Pxd_AJhgtVaV
The key bit is the Image display helper, applied to a local file–
from IPython.display import Image
Image('220px-TensorFlowLogo.svg.png')
Here is another way to show it.
##markdown Fig.1. Pic1 demo
import matplotlib.pyplot as plt
pic_name = '/content/drive/MyDrive/pic1.png'
image=plt.imread(pic_name)
fig=plt.figure(figsize=(20,30))
_=plt.imshow(image)
_=plt.axis('off')
Markdown tag shows text, which allows code hiding from the report (if that is your end goal).
Once you upload your local image to your Google Colab filesystem (click the folder icon on the upper left of your notebook that says "files", then upload it), you can use the IPython code to display it. You get the path link by right-clicking on the image after you uploaded it that says "copy path". Put the whole link in quotes.
from IPython import display
display.Image("/content/my-image.png")

embedding image into jupyter notebook and exporting to HTML

I am running Python 3.7 on Windows using pycharm. I have a jupyter notebook and I would like to embed an image into the notebook. I know all the ways of doing standard embedding with markdown language, BUT ideally what I want is:
a. Embed the image via markdown language, i.e. the notebook cell is in 'markdown' state, not 'Code' state, AND ALSO
b. Have it able to export to HTML and retain that image in the HTML file. i.e. on the notebook. I want to click File -> Download as -> HTML (.html), save the notebook file in .html format, and then when I send it to my buddy, the image that I attached is in the notebook, and he sees it.
I know i could do this in a cell ('code'):
from IPython.display import Image
Image(filename="myfile.jpg")
but I do not want to use 'Code', since when I send to my buddy, he will see the In [] code statement and the Out [] of the image in the notebook html file.
Note: This would be an image that was on my laptop that I would want in the html formatted exported notebook. It is NOT on the web where he could refer to it with a www type statement. Unless I'm crazy, there is no way to do this with markdown command in a cell, the only way to do it (with the image embedded 'permanently' into the .html format of the notebook), would be via a cell that was in 'Code' celltype.
When you use a code cell to show an image and then export the notebook to an HTML file, the image is converted to Base64 and the code directly used in the src attribute of the <img> tag. You can apply the same procedure with images included in markdown cells.
First, encode your image as Base64, e.g. by using one of the online enocders.
Create a markdown cell and include an <img> tag which uses your Base64 code, e.g.:
<img src="data:image/png;base64,CODE_FOLLOWS_HERE" />
Evaluate the cell and you should already see your image.
If you now export your notebook to HTML, the image should be included in the file the same way as images from code cells.
The only disadvantage with this approach is that your markdown cell gets cluttered with the (probably long) Base64 code. However, this is manageable by e.g. using a markdown cell dedicated solely to the image without other content.
You can install the Unofficial Jupyter Notebook Extensions.
It has some interesting extensions (e.g. spell checker, collapsible headings, ...). One of the extensions is Export HTML With Embedded Images which exactly does what you want.
To install Nbextensions using pip do the following:
$ pip install jupyter_contrib_nbextensions
$ pip install jupyter_nbextensions_configurator
$ jupyter contrib nbextension install --user
$ jupyter nbextensions_configurator enable --user
Then you will see in your Jupyter homepage a new tab (Nbextensions), where you can enable and configure different extension.
After enabling the "Export HTML With Embedded Images", you will see the corresponding option in the "File-Download as" menu.
My complete solution is based on Milania and
encoding-an-image-file-with-base64
how-to-base64-encode-an-image-using-python
BytesIO.getvalue
the code
import base64, io, IPython
from PIL import Image as PILImage
image = PILImage.open(image_path)
output = io.BytesIO()
image.save(output, format='PNG')
encoded_string = base64.b64encode(output.getvalue()).decode()
html = '<img src="data:image/png;base64,{}"/>'.format(encoded_string)
IPython.display.HTML(html)
For me, on Visual Studio Code, something like this did the trick (in a markdown cell, as you requested, and a image that you want to embed in your notebook and further be exported to the html output):
<figure>
<img src="./notebook_img/diptera_taxat_yes_no.jpg" width="200"/>
<figcaption>Limit the search on Diptera</figcaption>
</figure>
Where the image is located in "./notebook_img" relative to the location of the notebook (in this sense, the notebook is located in .)
Your buddy will not see the code from above when reading the HTML exported file, so that should satisfy the requested need as far as I understand. He will also not need the folder "notebook_img".

how to insert a link to a local file into a markdown cell?

Dear ipython notebook users,
I want to insert a link to a local file located in the notebook directory, and no, it is not an image (the only example I've found). I want to insert this link within a markdown cell.
When clicked on the link, the file is to be opened with a local application (in this case, a molecule viewer)
I've tried to come up with the correct syntax, but no luck. Please, any help is greatly appreciated.
I want to insert a link to a local file located in the notebook directory
I want to insert this link within a markdown cell.
The path need to be relative to where the server has been started, and prefixed with files/.
e.g: [my molecule](files/molecules/ethanol.mol)
the file is to be opened with a local application (in this case, a molecule viewer)
Not possible unless your application support custom links protocol like the itunes:// or apt-get:// one. the best that can append is that on link click you will be prompted to download the file. (keep in mind that the server can be on a different machine thant your browser)
completenting the answer of Matt, it will work only in you import FileLink
from IPython.display import FileLink, FileLinks
FileLink('path_to_file/filename.extension')
Then in a markdown cell insert your links waterBox30.pdb

Resources