有没有办法将 gif 添加到 Markdown 文件?

Is there a way to add a gif to a Markdown file?

我想将此 gif 添加到 GitHub 风格的降价文件中。如果在GitHub中做不到,是否可以在其他版本的markdown中做?

来自Markdown Cheatsheet

您可以将其添加到您的存储库并使用图像标签引用它:

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:


或者您可以使用 the url directly:

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

显示 gif 需要两件事

1- 使用 these examples

中的语法

![Alt Text](https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif)

产量:

2-图片url必须以gif结尾

3- 对于后代:如果上面的 .gif link 变坏,您将看不到图像,而是看到 alt-text 和 URL,如下所示:

4- 要调整 gif 的大小,您可以使用此 Github tutorial link

中的语法
<img src="https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif" width="40" height="40" />

产量:

Giphy 陷阱

满足上面列出的 2 个要求后(必须以 .gif 结尾并使用图像语法),如果您在使用 giphy 的 gif 时遇到问题:

确保你有正确的 giphy url! 您不能只在这个结尾添加 .gif 并让它起作用。

如果您只是从浏览器中复制 url,您将得到如下内容:

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

您需要改为单击 "Copy Link",然后专门抓取 "GIF Link"。注意正确的指向 media.giphy.com 而不是 giphy.com

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

  1. 有 gif 文件。
  2. 将 gif 文件推送到您的 github 存储库
  3. 单击 github 存储库中的该文件以获取 github gif 的地址
  4. 在您的自述文件中: ![alt-text](link)

示例如下: ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)

只需将 .gif 文件上传到 GitHub 的基本文件夹并编辑 README.md 只需使用此代码

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

除以上所有答案外:

如果您想为您的 github 存储库使用 gif README.md 并且 不想从您的根目录 解决它,那不是如果您只复制浏览器的 url 就足够了,例如您的浏览器 URL 是这样的:

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

但你应该在你的 github 帐户中打开你的 gif 并右键单击它并单击 copy image address 或类似这样的东西:

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

从本地上传:

  1. 将您的 .gif 文件添加到 Github 存储库的根目录并推送更改。
  2. 转到README.md
  3. 添加这个 ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
  4. 应该可以看到提交和 gif。

使用url显示gif:

  1. 转到README.md
  2. 按此格式添加![Alt text](https://sample/url/name-of-gif-file.gif)
  3. 应该可以看到提交和 gif。

希望对您有所帮助。

您可以使用 ![ ](任何 link 图片)

此外,我建议使用 https://stackedit.io/ 进行 markdown 格式化,这比记住所有 markdown 语法要容易得多

如果您可以提供 SVG 格式的图像,并且它是图标而不是照片,那么它可以使用 SMIL 动画进行动画处理,那么 SVG 绝对是 GIF 图像(或甚至其他格式)。

SVG 与其他图像格式一样,可以与标准标记或 HTML <img> 元素一起使用:

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

另一种更简单的方法是在浏览器中打开 git 存储库 (chrome),单击编辑 README.md

然后只需将您的 gif/png/jpeg 文件从您的本地计算机磁盘拖放,文件将自动上传并且 link 将被放置在 README.md 文件中,如下所示

![myfile](https://user-images.githubusercontent.com/52455330/139071980-91302a8a-37b1-4196-803e-f91b1de2ee5b.gif)

您要添加的文件

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

使用 HTML 的 img 标签然后提供来源 url.

<img src="https://...thumbs-up.gif">