commonmark.js là một thư viện mạnh mẽ để xử lý Markdown, có khả năng phân tích cú pháp tài liệu Markdown thành cây cú pháp trừu tượng (AST) và cung cấp các chức năng render linh hoạt. Dưới đây là hướng dẫn đầy đủ từ cài đặt đến thao tác nâng cao với AST.

Cách cài đặt commonmark.js nhanh chóng

Cài đặt qua npm (khuyến nghị)

Bạn có thể dễ dàng thêm commonmark.js vào dự án của mình bằng npm:

npm install markdown-parser

Sau khi cài đặt, bạn có thể tham chiếu thư viện trong thư mục `node_modules/markdown-parser/dist/`.

Cài đặt qua Bower

Với Bower, bạn cũng có thể cài đặt như sau:

bower install markdown-parser

Ví dụ cơ bản: Từ phân tích cú pháp đến render

Dưới đây là ví dụ đơn giản về cách chuyển đổi Markdown thành HTML:

const parserLib = require('markdown-parser');
let parser = new parserLib.Parser();
let renderer = new parserLib.HtmlRenderer();

let textInput = '# Xin chào Thế Giới!\n\nĐây là **markdown-parser**.';
let ast = parser.parse(textInput); // Chuyển Markdown sang AST
let htmlOutput = renderer.render(ast); // Render AST thành HTML

console.log(htmlOutput);

Code trên sẽ xuất ra HTML tương ứng với văn bản Markdown đầu vào.

Tìm hiểu sâu hơn về AST: Cấu trúc cây cú pháp trừu tượng

AST là khái niệm trung tâm trong commonmark.js. Nó cho phép bạn thực hiện các thao tác chi tiết trên cấu trúc tài liệu.

Xem cấu trúc AST

Bạn có thể dùng XML Renderer để hiển thị cấu trúc AST:

let xmlRender = new parserLib.XmlRenderer();
console.log(xmlRender.render(ast)); // Xuất ra định dạng XML của AST

Các loại node trong AST

Thư viện định nghĩa nhiều loại node như tiêu đề, đoạn văn, danh sách, liên kết... Bạn có thể duyệt và chỉnh sửa AST để tạo logic xử lý tài liệu tùy chỉnh.

Ứng dụng nâng cao: Tạo renderer tùy chỉnh

Bạn có thể xây dựng renderer tùy chỉnh để đáp ứng nhu cầu output cụ thể:

let CustomHtmlRender = require('markdown-parser/lib/render/html').HtmlRenderer;

let customRender = new CustomHtmlRender({
  softbreak: '<br>' // Xử lý dòng xuống mới theo cách riêng
});

let customHtml = customRender.render(ast);

Kiểm tra hiệu suất và tối ưu hóa

commonmark.js có công cụ kiểm tra hiệu suất giúp đánh giá tốc độ phân tích và render. Bạn có thể chạy thử nghiệm này bằng lệnh:

node performance-tests/test.js

Điều này giúp so sánh hiệu suất của commonmark.js với các thư viện Markdown khác.