Tô Sáng Cú Pháp Mã Nguồn (Syntax Highlighting)

Tính năng Syntax Highlighting (Tô sáng cú pháp mã nguồn) của theme TanaFlows là giải pháp trình bày code chuyên nghiệp dành cho các blogger viết về công nghệ, lập trình hoặc hướng dẫn kỹ thuật.

Theme tích hợp thư viện nổi tiếng Prism.js nhưng được tối ưu hóa ở mức tối đa để không làm ảnh hưởng đến tốc độ tải trang của độc giả phổ thông.

Các lợi ích nổi bật đối với người dùng

• Tự động nhận diện và tô màu code đẹp mắt: Mọi khối mã nguồn (như JavaScript, Python, HTML, CSS, C++…) trong bài viết sẽ tự động được tô màu theo phong cách tối “Tomorrow Theme” dịu mắt, rõ ràng và dễ đọc.
• Nút sao chép một chạm (Copy to Clipboard): Phía trên mỗi khối code sẽ tự động xuất hiện một thanh công cụ chứa nút “Copy”. Người đọc chỉ cần nhấp một lần để sao chép toàn bộ đoạn mã nguồn vào khay nhớ tạm mà không cần bôi đen thủ công, hạn chế tối đa việc sao chép thiếu ký tự.
• Trang web tải nhanh như chớp: Đối với các bài viết không chứa khối code nào, hệ thống sẽ không tải bất kỳ tệp dữ liệu nào của thư viện Prism.js để giữ tốc độ tải trang luôn ở mức cao nhất.

Cơ chế hoạt động thông minh ở phía sau

Để cân bằng giữa hiển thị đẹp mắt và hiệu suất cực cao, tính năng Syntax Highlighting hoạt động ngầm qua quy trình sau:

1. Kiểm tra điều kiện thông minh (Conditional Loading)

Khi độc giả mở một bài viết, theme sẽ quét nhanh xem trang đó có khối code (<pre><code>) nào hay không.

• Nếu không có: Tiến trình tải Prism.js lập tức dừng lại, không làm tốn tài nguyên.
• Nếu có: Hệ thống sẽ đợi trình duyệt rảnh rỗi (requestIdleCallback) để hiển thị xong toàn bộ nội dung bài viết và hình ảnh trước, sau đó mới nạp tài nguyên tô sáng code. Điều này giúp loại bỏ hoàn toàn hiện tượng nghẽn trang.

2. Tự động tải ngôn ngữ theo nhu cầu (Autoloader)

Thay vì tải trước một tệp Javascript khổng lồ chứa hàng trăm ngôn ngữ lập trình, theme tích hợp plugin tự động tải thông minh.

Ví dụ, nếu bài viết có một khối code JavaScript và một khối Python, hệ thống sẽ đọc thuộc tính và chỉ tải đúng tệp xử lý của JavaScript và Python từ CDN. Điều này giúp tiết kiệm tối đa băng thông cho người dùng.

3. Tách biệt thiết kế và logic

• Tệp CSS giao diện (prism-tomorrow.min.css) được lưu trực tiếp trên host của bạn để đảm bảo giao diện luôn đồng bộ, nhất quán và hiển thị ngay lập tức.
• Tệp JS và các plugin bổ trợ (như Autoloader, Toolbar, Copy-button) được tải bất đồng bộ từ Cloudflare CDN toàn cầu để tối ưu hóa bộ nhớ đệm (caching) của trình duyệt.