Skip to content

Instantly share code, notes, and snippets.

@h4ck4life

h4ck4life/Adding Images to markdown files in Gist.markdown

Forked from kannankumar/Adding Images to markdown files in Gist.markdown
Created January 31, 2019 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save h4ck4life/ada1960fcc88defc93fd89770ce255d1 to your computer and use it in GitHub Desktop.
Save h4ck4life/ada1960fcc88defc93fd89770ce255d1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Adding Images to markdown files in Gist.markdown

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

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