การใช้ JavaScript กับ Markdown

แม้ว่า Markdown เป็นภาษามาร์กอัพสำหรับการจัดรูปแบบข้อความเป็นหลัก แต่คุณสามารถเพิ่มความสามารถให้กับเอกสาร Markdown ด้วย JavaScript เพื่อเพิ่มการโต้ตอบและฟีเจอร์แบบไดนามิก

ทำความเข้าใจข้อจำกัด

ตัวแยกวิเคราะห์ Markdown มาตรฐานไม่สามารถเรียกใช้โค้ด JavaScript ได้ อย่างไรก็ตามมีวิธีการหลายวิธีในการผสานรวม JavaScript กับ Markdown:

1. แท็ก Script ของ HTML: ฝังตัว JavaScript โดยตรงในบล็อก HTML
2. ตัวประมวลผล Markdown: ใช้ตัวประมวลผลที่รองรับการเรียกใช้ JavaScript
3. เครื่องมือสร้างเว็บไซต์คงที่: ใช้ประโยชน์จากการประมวลผล JavaScript ในช่วงเวลาสร้าง
4. การเรนเดอร์ฝั่งไคลเอนต์: เพิ่ม JavaScript หลังจากแปลง Markdown เป็น HTML

การผสานรวมพื้นฐานกับ JavaScript

แท็ก Script แบบฝังตัว

# เอกสารแบบโต้ตอบของฉัน

<script>
function greet() {
  alert('สวัสดีจาก Markdown!');
}
</script>

<button onclick="greet()">คลิกที่นี่</button>

สคริปต์ภายนอก

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

<div id="dynamic-content"></div>

กรณีการใช้งานทั่วไป

1. ฟอร์มแบบโต้ตอบ

# ฟอร์มติดต่อ

<form id="contactForm">
  <input type="text" id="name" placeholder="ชื่อของคุณ">
  <input type="email" id="email" placeholder="อีเมล์ของคุณ">
  <button type="submit">ส่ง</button>
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('name').value;
  alert('ขอบคุณ, ' + name + '!');
});
</script>

2. การโหลดเนื้อหาแบบไดนามิก

# โพสต์ล่าสุด

<div id="posts-container"></div>

<script>
fetch('/api/posts')
  .then(response => response.json())
  .then(posts => {
    const container = document.getElementById('posts-container');
    posts.forEach(post => {
      container.innerHTML += `<h3>${post.title}</h3><p>${post.excerpt}</p>`;
    });
  });
</script>

3. การแสดงข้อมูลด้วยภาพ

# กราฟการขาย

<canvas id="salesChart" width="400" height="200"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.'],
    datasets: [{
      label: 'ยอดขาย',
      data: [12, 19, 3, 5]
    }]
  }
});
</script>

ข้อพิจารณาด้านความปลอดภัย

การป้องกัน XSS

เมื่อใช้ JavaScript ใน Markdown ให้ทำความสะอาดอินพุตของผู้ใช้เสมอ:

// แย่: การฉีด HTML โดยตรง
element.innerHTML = userInput;

// ดี: ใช้ textContent หรือทำความสะอาด
element.textContent = userInput;
// หรือ
element.innerHTML = DOMPurify.sanitize(userInput);

นโยบายความปลอดภัยเนื้อหา

ใช้ CSP headers เพื่อจำกัดการเรียกใช้สคริปต์:

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' https://trusted-cdn.com;">

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

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

สรุป

แม้ว่า Markdown เองจะไม่เรียกใช้ JavaScript แต่คุณสามารถรวมเทคโนโลยีทั้งสองนี้เข้าด้วยกันได้อย่างมีประสิทธิภาพเพื่อสร้างเอกสารที่สมบูรณ์และโต้ตอบได้ เลือกวิธีที่เหมาะสมที่สุดสำหรับกรณีการใช้งานของคุณและให้ความสำคัญกับความปลอดภัยและประสบการณ์ผู้ใช้เสมอ

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

• คู่มือ JavaScript MDN
• เอกสาร Markdown-it
• เอกสาร MDX