มีวิธีเพิ่ม gif ในไฟล์ Markdown หรือไม่?


229

ฉันต้องการเพิ่มgifนี้ไปยังไฟล์ markdown ปรุงแต่ง GitHub หากไม่สามารถทำได้ใน GitHub เป็นไปได้ไหมที่จะทำใน markdown รุ่นอื่น?


คำตอบ:


485

การแสดง gif ต้องการสองสิ่ง

1- ใช้ไวยากรณ์นี้เหมือนใน ตัวอย่างเหล่านี้

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

อัตราผลตอบแทน:

ข้อความแทน

2- URL รูปภาพจะต้องลงท้ายด้วย gif

3- สำหรับลูกหลาน: หากลิงก์. gif ด้านบนไม่ดีคุณจะไม่เห็นภาพและเห็นข้อความแทนและ URL แทนดังนี้:

ข้อความแทน

4- สำหรับการปรับขนาด gif คุณสามารถใช้ไวยากรณ์นี้เช่นเดียวกับในลิงค์การสอน Githubนี้

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

อัตราผลตอบแทน:


3
@NikKov จริง !! นี่เป็นคำถามทางเทคนิค
เลด Annajar

6
เด็กคนนั้นกระแทกหัวของเขาอย่างแรง ยากเกินไปบนพื้นกระเบื้องและส่วนใหญ่ได้รับความเสียหายของสมองหรืออย่างน้อยก็เกิดการสั่นสะเทือนอย่างรุนแรง ตามจริงแล้วฉันจะลบออกเมื่อฉันเห็นว่าไม่เหมาะสมและแทนที่ด้วยสิ่งที่ดีกว่า
eduncan911

3
โปรดทราบว่าหาก gif ของคุณใหญ่เกินไปคุณจะเห็นกล่องภาพที่ไม่ดี GIFs ขนาดเล็กจะทำงานได้ดี
Shubham Chaudhary

1
ฉันเพิ่งโหวตคำตอบไม่เพียงเพราะมันถูกต้อง แต่เป็นเพราะทุกคนรักลูกแมว! :)
MilitelloVinx

2
@Gati ฉันไม่รู้ ฉันคิดว่าคุณต้องสร้างคำถามใหม่สำหรับสิ่งนั้น
Khaled Annajar

102

จากMarkdown Cheatsheet :

คุณสามารถเพิ่มลงใน repo ของคุณและอ้างอิงด้วยแท็กรูปภาพ:

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 สไตล์: ข้อความแสดงแทน

อ้างอิงสไตล์: ข้อความแสดงแทน


หรือคุณสามารถใช้URL โดยตรง :

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

@erip วิธีใช้ gifs จาก Giphy?
AbhimanyuAryan

1
@AbhimanyuAryan คุณสามารถค้นหาที่อยู่ของ gif เหล่านั้นได้โดยคลิกขวาที่พวกเขาและรับที่อยู่ ตัวอย่างเช่น: media.giphy.com/media/MoYC1N4nv7Fcs/giphy.gif
erip

Gif (และภาพอื่น ๆ ที่ฉันเชื่อ) เชื่อมโยงกับไฟล์ markdown ใน github, รับบริการโดยcamoด้วยขีด จำกัด ไฟล์ 5MB
0xcaff

11
  1. มีไฟล์ gif
  2. ผลักดันไฟล์ gif ไปยัง repo GitHub ของคุณ
  3. คลิกที่ไฟล์นั้นบน repo Github เพื่อรับที่อยู่ Github ของ gif
  4. ในไฟล์ README ของคุณ: ![alt-text](link)

ตัวอย่างด้านล่าง: ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)


7
ง่ายกว่าที่จะวางไว้ในไดเรกทอรี repo เช่น/imgนั้นใช้![alt text](img/my-image.png)
Braden Best

7

Giphy Gotcha

หลังจากทำตามข้อกำหนด 2 ข้อที่ระบุไว้ด้านบน (ต้องสิ้นสุด.gifและใช้ไวยากรณ์รูปภาพ) หากคุณมีปัญหากับ gif จาก giphy:

ให้แน่ใจว่าคุณมี URL ที่ giphy ที่ถูกต้อง! คุณไม่สามารถเพิ่ม.gifที่ส่วนท้ายของสิ่งนี้และใช้งานได้

หากคุณเพียงคัดลอก URL จากเบราว์เซอร์คุณจะได้รับสิ่งต่อไปนี้:

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

คุณต้องคลิกที่ "คัดลอกลิงค์" แทนแล้วหยิบ "ลิงค์ GIF" โดยเฉพาะ สังเกตุจุดที่ถูกต้องหนึ่งmedia.giphy.comแทนที่จะเป็นเพียงแค่giphy.com:

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


3

เพียงอัปโหลด.gifไฟล์ไปยังโฟลเดอร์ฐานของ GitHub และแก้ไขREADME.mdเพียงใช้รหัสนี้

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


0

นอกจากคำตอบทั้งหมดด้านบน:

หากคุณต้องการใช้ gif สำหรับที่เก็บ github ของคุณ README.md และไม่ต้องการใช้จาก root ของคุณก็ไม่เพียงพอหากคุณเพิ่งคัดลอก url ของเบราว์เซอร์ของคุณตัวอย่างเช่น URL ของเบราว์เซอร์ของคุณคือ:

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

แต่คุณควรเปิด gif ของคุณในบัญชี github ของคุณและคลิกที่มันและคลิกcopy image addressหรือ sth เช่นเดียวกับที่ sth เช่นนี้:

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


0

อัปโหลดจากท้องถิ่น:

  1. เพิ่มไฟล์. gif ของคุณไปยังรูทของที่เก็บ Github และผลักดันการเปลี่ยนแปลง
  2. ไปที่ README.md
  3. เพิ่มสิ่งนี้ ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
  4. ควรเห็นคอมมิทและ gif

แสดง gif โดยใช้ url:

  1. ไปที่ README.md
  2. เพิ่มในรูปแบบนี้ ![Alt text](https://sample/url/name-of-gif-file.gif)
  3. ควรเห็นคอมมิทและ gif

หวังว่านี่จะช่วยได้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.