استخدام 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 لتقييد تنفيذ السكريبتات:

<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