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
just upload the .gif
file into your base folder of GitHub and edit README.md
just use this code
![](name-of-giphy.gif)
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
![alt-text](link)
example below:
![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)
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
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"/>
Upload from local:
![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
Show the gif using url:
![Alt text](https://sample/url/name-of-gif-file.gif)
Hope this helps.
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
:
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:
Reference-style:
Alternatively you can use the url directly:
![](http://www.reactiongifs.us/wp-content/uploads/2013/10/nuh_uh_conan_obrien.gif)
Source: Stackoverflow.com