[markdown] Is there a way to add a gif to a Markdown file?

I want to add this gif to a GitHub flavored markdown file. If it can't be done in GitHub, is it possible to do it in another version of markdown?

This question is related to markdown gif github-flavored-markdown

The answer is


in addition to all answers above:

if you want to use a gif for your github repository README.md and don't want to address it from your root directory, it's not enough if you just copy the url of your browser, for example your browser URL is sth like:

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif

but you should open your gif in your github account and right click on it and click copy image address or sth like that which is sth like this:

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif?raw=true


  1. have gif file.
  2. push gif file to your github repo
  3. click on that file on the github repo to get github address of the gif
  4. in your README file: ![alt-text](link)

example below: ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)


From the Markdown Cheatsheet:

You can add it to your repo and reference it with an image tag:

Inline-style: 
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Inline-style: alt text

Reference-style: alt text


Alternatively you can use the url directly:

![](http://www.reactiongifs.us/wp-content/uploads/2013/10/nuh_uh_conan_obrien.gif)

If you can provide your image in SVG format and if it is an icon and not a photo so it can be animated with SMIL animations, then it would be definitely the superior alternative to gif images (or even other formats).

SVG images, like other image files, could be used with either standard markup or HTML <img> element:

![image description](the_path_to/image.svg)
<img src="the_path_to/image.svg" width="128"/>

you can use ![ ](any link of image)

Also I would suggest to use https://stackedit.io/ for markdown formating and wring it is much easy than remembering all the markdown syntax


Giphy Gotcha

After following the 2 requirements listed above (must end in .gif and using the image syntax), if you are having trouble with a gif from giphy:

Be sure you have the correct giphy url! You can't just add .gif to the end of this one and have it work.

If you just copy the url from a browser, you will get something like:

https://giphy.com/gifs/gol-automaton-game-of-life-QfsvYoBSSpfbtFJIVo

You need to instead click on "Copy Link" and then grab the "GIF Link" specifically. Notice the correct one points to media.giphy.com instead of just giphy.com:

https://media.giphy.com/media/QfsvYoBSSpfbtFJIVo/giphy.gif


Upload from local:

  1. Add your .gif file to the root of Github repository and push the change.
  2. Go to README.md
  3. Add this ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
  4. Commit and gif should be seen.

Show the gif using url:

  1. Go to README.md
  2. Add in this format ![Alt text](https://sample/url/name-of-gif-file.gif)
  3. Commit and gif should be seen.

Hope this helps.


just upload the .gif file into your base folder of GitHub and edit README.md just use this code

![](name-of-giphy.gif)


Examples related to markdown

How to add empty spaces into MD markdown readme on GitHub? how to make a new line in a jupyter markdown cell How do I display local image in markdown? How to markdown nested list items in Bitbucket? How to apply color in Markdown? How to right-align and justify-align in Markdown? Is there a way to add a gif to a Markdown file? How to add new line in Markdown presentation? How link to any local file with markdown syntax? How to insert a line break <br> in markdown

Examples related to gif

How to animate GIFs in HTML document? Is there a way to add a gif to a Markdown file? Show loading gif after clicking form submit using jQuery How to display a gif fullscreen for a webpage background? Adding gif image in an ImageView in android Stop a gif animation onload, on mouseover start the activation Show animated GIF What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG? Animated GIF in IE stopping

Examples related to github-flavored-markdown

How to draw checkbox or tick mark in GitHub Markdown table? Is there a way to add a gif to a Markdown file? How to add footnotes to GitHub-flavoured Markdown? Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g How can one display images side by side in a GitHub README.md? Is there a way to get colored text in GitHubflavored Markdown? github markdown colspan Highlight Bash/shell code in Markdown files How to write lists inside a markdown table? How to add images to README.md on GitHub?