Cách Thêm Markdown vào Trang Web của Bạn

Để thêm Markdown vào một trang web, bạn có thể tuân theo các bước sau đây. Lưu ý rằng việc này giả định bạn đã có một trang web cơ bản và muốn chèn nội dung Markdown vào trang đó. Có hai phương pháp phổ biến để làm điều này: sử dụng thư viện JavaScript để chuyển đổi Markdown thành HTML trực tiếp trên trình duyệt, hoặc chuyển đổi Markdown thành HTML trên máy chủ và sau đó gửi HTML đã chuyển đổi đến trình duyệt.

Sử dụng JavaScript trên Trình Duyệt

1. Chọn một thư viện JavaScript: Có nhiều thư viện có thể chuyển đổi Markdown sang HTML ngay trong trình duyệt của bạn. Một số thư viện phổ biến bao gồm Marked, Remarkable, và Showdown. Đối với hướng dẫn này, chúng ta sẽ sử dụng Marked.

2. Thêm thư viện vào trang web của bạn: Bạn cần thêm thư viện JavaScript vào trang web của bạn. Nếu sử dụng Marked, bạn có thể thêm nó bằng cách sử dụng CDN:

   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   

3. Thêm nội dung Markdown: Bạn có thể thêm nội dung Markdown trực tiếp vào trang HTML của mình bằng cách sử dụng thẻ <script> với loại (type) là text/markdown, hoặc bạn có thể tải nội dung từ một tệp ngoại vi.

   <script type="text/markdown">
   # Tiêu đề
   Đây là một đoạn văn bản trong **Markdown**!
   </script>
   

4. Chuyển đổi và hiển thị Markdown: Sử dụng JavaScript để tìm nội dung Markdown, chuyển đổi nó thành HTML, và sau đó chèn nó vào DOM.

   <div id="markdown-container"></div>
   
   <script>
     document.addEventListener('DOMContentLoaded', (event) => {
       const markdownContent = document.querySelector('script[type="text/markdown"]').textContent;
       const htmlContent = marked(markdownContent);
       document.getElementById('markdown-container').innerHTML = htmlContent;
     });
   </script>
   

Chuyển đổi trên Máy Chủ

1. Chuyển đổi Markdown sang HTML: Trên máy chủ của bạn, sử dụng một công cụ hoặc thư viện để chuyển đổi nội dung Markdown sang HTML. Đối với Node.js, bạn có thể sử dụng cùng một thư viện Marked như một phần của quá trình xây dựng hoặc tại thời điểm phục vụ nội dung.

2. Gửi HTML đến Trình Duyệt: Sau khi chuyển đổi, gửi chuỗi HTML đến trình duyệt như một phần của phản hồi HTTP. Bạn có thể làm điều này thông qua bất kỳ framework phục vụ web nào bạn đang sử dụng (ví dụ: Express trong Node.js).

   const marked = require('marked');
   const express = require('express');
   const app = express();
   
   app.get('/', (req, res) => {
     const markdown = '# Hello World\nThis is markdown.';
     const html = marked(markdown);
     res.send(html);
   });
   
   app.listen(3000, () => console.log('Server running on port 3000'));
   

Phương pháp bạn chọn phụ thuộc vào yêu cầu cụ thể của dự án và môi trường phát triển. Việc sử dụng JavaScript trên trình duyệt cho phép nội dung được chuyển đổi và hiển thị mà không cần phải liên lạc lại với máy chủ, trong khi chuyển đổi trên máy chủ có thể tốt hơn cho việc tối ưu hóa SEO và giảm thời gian tải cho người dùng.