Blockdit Logo (Mobile)
Shoper Gamer
•
3 พ.ค. เวลา 04:25 • การศึกษา
Github By ShoperGamer

วิธีตกแต่งไฟล์ README บน GitHub ให้สวยด้วย StackEdit.io

โดย
ไฟล์ README.md คือหน้าตาของโปรเจกต์คุณบน GitHub! การเขียน README ที่สวยงาม และ เป็นมืออาชีพไม่เพียงเพิ่มความน่าเชื่อถือ แต่ยังช่วยดึงดูดผู้ร่วมพัฒนาหรือผู้ใช้งาน
ปัญหาใหญ่ GitHub แสดงผล Markdown เบื้องต้นได้ แต่ขาดลูกเล่นการจัดวางที่สวยงาม
ทางออก StackEdit.io เครื่องมือฟรีที่ช่วยเขียน และ ตกแต่ง Markdown แบบ Real-time พร้อม Export ไปยัง GitHub ได้ง่ายๆ
StackEdit.io เป็น Online Markdown Editor ที่มีจุดเด่น
✅ แสดงผลแบบ Real-time (เห็นผลลัพธ์ขณะพิมพ์)
✅ รองรับ Markdown, HTML และ CSS
✅ มีธีมสวยๆ ให้เลือก
✅ เชื่อมต่อกับ GitHub, Google Drive ได้
✅ ใช้งานฟรี!
[เหมาะกับใคร?]
- นักพัฒนาที่อยากเขียน README สวยๆ
- คนที่อยากจัด Layout แบบมืออาชีพ
- ผู้เริ่มต้นที่ยังไม่คล่อง Markdown
1
2.1) เข้าสู่เว็บไซต์ และ เริ่มต้น
1) เปิด StackEdit.io
2) คลิก "Start Writing" เพื่อสร้างไฟล์ใหม่
2.2) ใช้ฟีเจอร์ช่วยเขียน Markdown
- แท็บด้านซ้าย : เขียน Markdown
- แท็บด้านขวา: ดูผลลัพธ์แบบ Real-time
☆ ตัวอย่างโค้ดสำหรับ README สวยๆ
````markdown
# 🚀 Project Name
![Banner Image](ลิ้งค์รูปภาพ)
✨ Description : โปรเจกต์นี้ช่วยแก้ปัญหา...
## 📌 Features
- ✅ ฟีเจอร์ 1
- ✅ ฟีเจอร์ 2
1
## 🛠️ Installation
```bash
npm install my-project
```
## 📸 Screenshots
| Feature 1 | Feature 2 |
|-----------|-----------|
| ![Screenshot 1](ลิ้งค์รูปภาพ) | ![Screenshot 2](ลิ้งค์รูปภาพ) |
## 🤝 Contributing
```bash
git clone https://github.com/your/project.git
```
## 📜 License
MIT © [Your Name](https://github.com/yourname)
````
2.3) เพิ่มลูกเล่นด้วย HTML/CSS
หาก Markdown ธรรมดาไม่พอ คุณสามารถแทรก HTML/CSS เพื่อตกแต่งเพิ่มเติมได้
[ตัวอย่าง]
```html
<div align="center">
<h2 style="color: #ff6b6b;">Welcome to My Project!</h2>
</div>
```
1
2.4) เลือกธีมสวยๆ
1. คลิก "Themes" (มุมขวาบน)
2. เลือกธีมที่ชอบ เช่น "Dark", "Solarized"
1
2.5) Export ไปยัง GitHub
1. คลิก "Publish" (แถบด้านบน)
2. เลือก "GitHub" และ ล็อกอินเพื่ออัปโหลด
  • ★
    ​3) เทคนิคเขียน Readme ให้โดนใจ
3.1) โครงสร้าง README มาตรฐาน
1. ชื่อโปรเจกต์ + ไอคอน (ใช้ Emoji เพื่อดึงดูดความสนใจ)
2. Banner Image (ภาพ Cover สวยๆ)
3. Description (อธิบายสั้นๆ ว่าโปรเจกต์นี้ทำอะไร)
4. Features (บอกจุดเด่น)
5. Installation (วิธีติดตั้ง)
6. Usage (วิธีใช้)
7. Screenshots (ภาพตัวอย่าง)
8. Contributing (วิธีร่วมพัฒนาต่อ)
9. License (สัญญาอนุญาต)
3.2) ใช้ Badges เพิ่มความ Professional
เพิ่ม Badge จาก Shields.io เช่น
✏️ Shoper Gamer
>> https://linkbio.co/ShoperGamer
  • ✓
    ​สำหรับคนที่สนใจ 👇
Credit :
👇
  • ●
    ​https://www.techtarget.com/searchsoftwarequality/tip/How-to-choose-the-best-Markdown-editor-for-your-use-case

ดูเพิ่มเติมในซีรีส์

โฆษณา