Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 60 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save kannankumar/4c613cac6d9db896062a16e1cc57d3e5 to your computer and use it in GitHub Desktop.
Save kannankumar/4c613cac6d9db896062a16e1cc57d3e5 to your computer and use it in GitHub Desktop.

How To - Upload and add Images to markdown files in Gist

Markdown files allow embedding images in it. However it requires the image to be hosted at some location and we can add the url of the image to embed it.

Example: ![Alternate image text](https://someurl/imagelocation/image.png)

We can use services like imgur or other services to host the images and use the hosted URL.

What I'm going to show is just a quick and dirty alternative to the above mentioned image hosting services.

Once you have created a Gist, you can add comments to the Gist if required. We'll be using the features of this rich text editor of comment.

Steps:

1) Pre-requisite : Create a gist with atleast one file.
Create Gist

2) Copy + Paste the image into the Comment field.
OR
Drag and drop the image into the Comment field.
The image will start uploading to Github servers. Uploading Image

3) Once the image is uploaded, the Url link to the hosted image is visible in comments field
Link for uploaded image

  ___Copy and Use this link in the .markdown file___  
  ``![image text](https://cloud.githubusercontent.com/assets/711743/25648417/57cd2c0c-2fe9-11e7-8753-b60ea2656faf.png)``

4) Save the markdown file. And you'll see the image placed inline in the markdown file. Done!
Image embedded in markdown

like_that_gif
You can use it to add GIFs too.

@Rodwan-Bakkar
Copy link

Great way! But do you guarantee the photo will not be removed someday??

@chalg
Copy link

chalg commented Apr 15, 2018

Excellent, thanks..

@theodoraisola
Copy link

Really helpful. Thanks

@JilinXie
Copy link

That's smart

@mcecere
Copy link

mcecere commented Jun 26, 2018

very cool and clever
Thanks!

@AdrianBinDC
Copy link

Thank you for posting this!

@vovasosnove
Copy link

Thank you, it is what I was looking for!

@Jiab77
Copy link

Jiab77 commented Aug 13, 2018

Amazing! Thank you so much! 👍

@markcam1
Copy link

good stuff 👍

@buffalolazyvn
Copy link

That's great solution, tks!

@simonis
Copy link

simonis commented Feb 15, 2019

You could also just add the picture as regular file to your gist and reference with either a relative or absolute path as describe here: https://gist.github.com/cben/46d9536baacb7c5d196c/#is-there-an-easy-way-to-link-image-in-a-gist-

@dekm1972
Copy link

This has stopped working. Can it be fixed please?

@kannankumar
Copy link
Author

kannankumar commented Apr 12, 2019

@dekm1972 - Seems like the drag and drop functionality in Github Gist's comments is not working.
I tried the Drag and Drop in a Github Repo's comments and works as expected.

Till GH fixes the drag and drop on Gist comments feel free to check out the suggestions from @simonis

@kannankumar
Copy link
Author

UPDATE: The issue has been raised with Github and they are working on it.

Github Support response

@mochadwi
Copy link

nice and thanks a lot @kannankumar

@pepasflo
Copy link

@kannankumar I just tried this and it appears to be working again! yay!

@kannankumar
Copy link
Author

kannankumar commented May 13, 2019

You are right @pepasflo, it works now !!

image

PS - Sorry that I forgot to update the Gist when the friendly folks from @github told me they have fixed it. :-)

@failure-to-thrive
Copy link

No need to upload anything at least for .ipynb's markdowns. Embedding images with <img src="data:image/png;base64,..."> works very well. ![](data:image/png;base64,...) doesn't. See https://gist.github.com/failure-to-thrive/61048f3407836cc91ab1430eb8e342d9

@KiranHipparagi
Copy link

How can i add gif's to markdown files in Gist??

@kannankumar
Copy link
Author

@KiranHipparagi - Can be done using the same steps listed above.
Added an example in the Markdown above.
like_that_gif

@shayan-golafshani
Copy link

I was having issues uploading in the gist area, but I found a work around with Google Drive hosting and this stack overflow thread.

@yupeshekhonov
Copy link

Thanks! It was much easier than I thought

@CelestyBliss
Copy link

You never understand things till you get your hands dirty. That's a brilliant idea! Got it after going hands on. Thank you very much!

@dmartinol
Copy link

Really clever, Thank you!

@drxfty
Copy link

drxfty commented Feb 21, 2024

yes

@drxfty
Copy link

drxfty commented Feb 27, 2024

yes

@DanteTerry
Copy link

skyatch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment