การปรับแต่ง CSS ใน Markdown

แม้ว่า Markdown จะให้การจัดรูปแบบพื้นฐาน แต่คุณสามารถปรับปรุงเอกสารของคุณได้อย่างมากด้วย CSS เพื่อเพิ่มสี การออกแบบ และการปรับแต่งทางภาพ

การจัดรูปแบบพื้นฐาน

การฝัง CSS แบบอินไลน์

<style>
.highlight {
  background-color: yellow;
  padding: 2px 5px;
}
</style>

นี่คือข้อความ <span class="highlight">ที่เน้น</span>

การเชื่อมโยงสไตล์ชีตภายนอก

<link rel="stylesheet" href="styles.css">

# เนื้อหาของฉัน

เทคนิค CSS ขั้นสูง

การปรับแต่งบล็อกโค้ด

pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
}

code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
}

การจัดรูปแบบตาราง

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

th {
  background: #3498db;
  color: white;
  padding: 12px;
  text-align: left;
}

td {
  padding: 10px;
  border: 1px solid #ddd;
}

tr:nth-child(even) {
  background: #f9f9f9;
}

การปรับปรุงลิงก์

a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

เฟรมเวิร์ก CSS

Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="alert alert-info" role="alert">
  นี่คือข้อความข้อมูล!
</div>

Tailwind CSS

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-blue-500 text-white p-4 rounded-lg">
  กล่องที่จัดรูปแบบด้วย Tailwind
</div>

แนวทางปฏิบัติที่ดีที่สุด

1. ความสอดคล้อง: ใช้ตัวแปร CSS สำหรับสีและระยะห่าง
2. การตอบสนอง: ทำให้การออกแบบเป็นมิตรกับมือถือ
3. ประสิทธิภาพ: ย่อ CSS และโหลดสิ่งที่สำคัญก่อน
4. การเข้าถึง: ตรวจสอบความคมชัดที่เพียงพอและการสนับสนุนตัวอ่านหน้าจอ
5. การบำรุงรักษา: จัดระเบียบ CSS ในไฟล์ที่มีตรรกะ

สรุป

CSS ช่วยให้คุณเปลี่ยน Markdown ธรรมดาเป็นเอกสารที่สวยงามและเป็นมืออาชีพ เลือกวิธีที่เหมาะกับโครงการของคุณและเพลิดเพลินกับความยืดหยุ่นในการปรับแต่งรูปลักษณ์ตามความต้องการของคุณ

แหล่งข้อมูลเพิ่มเติม

• คู่มือ CSS MDN
• CSS-Tricks
• Can I Use