Sử dụng JavaScript với Markdown

Mặc dù Markdown chủ yếu là ngôn ngữ đánh dấu để định dạng văn bản, bạn có thể nâng cao tài liệu Markdown của mình bằng JavaScript để thêm tính tương tác và các tính năng động.

Hiểu về Giới hạn

Các trình phân tích cú pháp Markdown tiêu chuẩn không thực thi mã JavaScript. Tuy nhiên, có một số cách để tích hợp JavaScript với Markdown:

1. Thẻ Script HTML: Nhúng JavaScript trực tiếp trong các khối HTML
2. Bộ xử lý Markdown: Sử dụng bộ xử lý hỗ trợ thực thi JavaScript
3. Trình tạo trang web tĩnh: Tận dụng xử lý JavaScript trong thời gian xây dựng
4. Hiển thị phía máy khách: Thêm JavaScript sau khi chuyển đổi Markdown sang HTML

Tích hợp JavaScript Cơ bản

Thẻ Script Nội tuyến

# Tài liệu Tương tác Của Tôi

<script>
function greet() {
  alert('Xin chào từ Markdown!');
}
</script>

<button onclick="greet()">Nhấp vào đây</button>

Scripts Bên ngoài

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

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

Các Trường hợp Sử dụng Phổ biến

1. Biểu mẫu Tương tác

# Biểu mẫu Liên hệ

<form id="contactForm">
  <input type="text" id="name" placeholder="Tên của bạn">
  <input type="email" id="email" placeholder="Email của bạn">
  <button type="submit">Gửi</button>
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('name').value;
  alert('Cảm ơn, ' + name + '!');
});
</script>

2. Tải Nội dung Động

# Bài viết Mới nhất

<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. Trực quan hóa Dữ liệu

# Biểu đồ Doanh số

<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: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4'],
    datasets: [{
      label: 'Doanh số',
      data: [12, 19, 3, 5]
    }]
  }
});
</script>

Cân nhắc về Bảo mật

Bảo vệ chống XSS

Khi sử dụng JavaScript trong Markdown, hãy luôn làm sạch đầu vào của người dùng:

// Tệ: Tiêm HTML trực tiếp
element.innerHTML = userInput;

// Tốt: Sử dụng textContent hoặc làm sạch
element.textContent = userInput;
// hoặc
element.innerHTML = DOMPurify.sanitize(userInput);

Chính sách Bảo mật Nội dung

Triển khai CSP headers để hạn chế thực thi script:

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

Thực hành Tốt nhất

1. Tách JavaScript: Lưu trữ JavaScript trong các tệp bên ngoài khi có thể
2. Cải tiến Dần dần: Đảm bảo nội dung hoạt động mà không cần JavaScript
3. Sử dụng CDN: Tải thư viện phổ biến từ CDN để cache tốt hơn
4. Giảm Scripts Nội tuyến: Sử dụng ủy quyền sự kiện thay vì trình xử lý nội tuyến
5. Tài liệu Phụ thuộc: Chỉ rõ các thư viện JavaScript cần thiết

Kết luận

Mặc dù Markdown bản thân không thực thi JavaScript, bạn có thể kết hợp hiệu quả hai công nghệ này để tạo tài liệu phong phú và tương tác. Chọn phương pháp phù hợp nhất với trường hợp sử dụng của bạn và luôn ưu tiên bảo mật và trải nghiệm người dùng.

Tài nguyên Bổ sung

• Hướng dẫn JavaScript MDN
• Tài liệu Markdown-it
• Tài liệu MDX