Có cách nào để thêm gif vào tệp Markdown không?


229

Tôi muốn thêm gif này vào tệp đánh dấu có hương vị GitHub. Nếu nó không thể được thực hiện trong GitHub, bạn có thể thực hiện nó trong một phiên bản đánh dấu khác không?


Câu trả lời:


485

Hiển thị gifs cần hai điều

1- Sử dụng cú pháp này như trong các ví dụ này

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

Sản lượng:

Văn bản thay thế

2- Url hình ảnh phải kết thúc bằng gif

3- Đối với hậu thế: nếu liên kết .gif ở trên bị hỏng, bạn sẽ không nhìn thấy hình ảnh và thay vào đó sẽ thấy văn bản thay thế và URL, như thế này:

Văn bản thay thế

4 - để thay đổi kích thước gif, bạn có thể sử dụng cú pháp này như trong liên kết hướng dẫn Github này

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

Sản lượng:


3
@NikKov cho thật !! Đây là một câu hỏi kỹ thuật.
Khaled Annajar

6
Đứa bé đó thực sự đánh vào đầu nó, khó khăn. Quá khó khăn trên sàn gạch và rất có thể đã bị tổn thương não hoặc ít nhất là chấn động nghiêm trọng. Như một vấn đề thực tế, tôi sẽ loại bỏ nó khi tôi thấy nó gây khó chịu, và thay thế nó bằng một cái gì đó đẹp hơn.
eduncan911

3
Xin lưu ý rằng nếu gif của bạn quá lớn, bạn sẽ thấy một hộp hình ảnh xấu. Gifs nhỏ hơn sẽ hoạt động tốt.
Shubham Chaudhary

1
Tôi chỉ nêu lên câu trả lời không chỉ vì chính xác, mà bởi vì mọi người đều yêu thích mèo con! :)
MilitelloVinx

2
@Gati tôi không biết. Tôi nghĩ bạn cần tạo một câu hỏi mới cho điều đó.
Khaled Annajar

102

Từ chiếc áo choàng Markdown :

Bạn có thể thêm nó vào repo của bạn và tham chiếu nó với một thẻ hình ảnh:

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"

Kiểu nội tuyến: văn bản thay thế

Kiểu tham chiếu: văn bản thay thế


Ngoài ra, bạn có thể sử dụng url trực tiếp :

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

@erip làm thế nào để sử dụng gifs từ Giphy?
AbhimanyuAryan

1
@AbhimanyuAryan Bạn có thể tìm địa chỉ của những gifs đó bằng cách nhấp chuột phải vào chúng và lấy địa chỉ. Ví dụ: media.giphy.com/media/MoYC1N4nv7Fcs/giphy.gif
erip

Gifs (và các hình ảnh khác mà tôi tin) được liên kết với các tệp đánh dấu trên github, được phục vụ bằng camo với giới hạn tệp là 5MB.
0xcaff

11
  1. có tập tin gif.
  2. đẩy tập tin gif vào repo github của bạn
  3. nhấp vào tập tin đó trên repo github để lấy địa chỉ github của gif
  4. trong tệp README của bạn: ![alt-text](link)

ví dụ dưới đây: ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)


7
Dễ dàng hơn để đặt nó vào một thư mục repo như thế /imgvà sau đó sử dụng![alt text](img/my-image.png)
Braden Best

7

Giphy Gotcha

Sau khi làm theo 2 yêu cầu được liệt kê ở trên (phải kết thúc .gifvà sử dụng cú pháp hình ảnh), nếu bạn gặp sự cố với gif từ giphy:

Hãy chắc chắn rằng bạn có url địa chỉ chính xác! Bạn không thể chỉ cần thêm .gifvào cuối của cái này và làm cho nó hoạt động.

Nếu bạn chỉ sao chép url từ trình duyệt, bạn sẽ nhận được một cái gì đó như:

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

Thay vào đó, bạn cần nhấp vào "Sao chép liên kết" và sau đó lấy "Liên kết GIF" một cách cụ thể. Lưu ý một điểm chính xác media.giphy.comthay vì chỉ giphy.com:

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


3

chỉ cần tải tệp lên .gifthư mục cơ sở của GitHub và chỉnh sửa README.mdchỉ cần sử dụng mã này

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


0

Ngoài tất cả các câu trả lời trên:

nếu bạn muốn sử dụng gif cho kho lưu trữ github của bạn README.md và không muốn sử dụng nó từ thư mục gốc của bạn , thì không đủ nếu bạn chỉ sao chép url của trình duyệt, ví dụ: URL trình duyệt của bạn giống như:

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

nhưng bạn nên mở gif của bạn trong tài khoản github của bạn và rihgt nhấp vào nó và nhấp copy image addresshoặc sth như thế đó là sth như thế này:

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


0

Tải lên từ địa phương:

  1. Thêm tệp .gif của bạn vào thư mục gốc của kho Github và đẩy thay đổi.
  2. Truy cập README.md
  3. Thêm điều này ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
  4. Cam kết và gif nên được nhìn thấy.

Hiển thị gif bằng url:

  1. Truy cập README.md
  2. Thêm vào định dạng này ![Alt text](https://sample/url/name-of-gif-file.gif)
  3. Cam kết và gif nên được nhìn thấy.

Hi vọng điêu nay co ich.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.