Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Thư Viện Javascript Syntax Highlighter Tốt Nhất (2020)

Những Thư Viện Javascript Syntax Highlighter Tốt Nhất (2020)


Ngày 3 Tháng 7 Năm 2020

Những Thư Viện Javascript Syntax Highlighter Tốt Nhất (2020)

Syntax Highlighter sẽ cực kỳ hữu ích với những bạn đang viết blog hay làm website về các vấn đề liên quan đến lập trình. Nó giúp chúng ta có thể nhúng những đoạn mã ví dụ vào trang web một cách dễ dàng và nhất quát. Ngoài ra nó cũng giúp làm nổi bật cũng như thu hút sự chú ý của người dùng hơn thông qua những bộ theme mà thư viện cung cấp. Bây giờ bạn hãy cùng mình đi vào tìm hiểu những thư viện Javascript Syntax Highlighter được sử dụng phổ biến nhất trong năm 2020 nhé!

Highlightjs

Highlightjs là một thư viện mã nguồn mở được xây dựng bằng Javascript giúp bạn làm nổi bật đoạn code ở trong trang web và có thể chạy trên cả trình duyệt cũng như trên máy chủ. Một số điểm mạnh của thư viện này là không phụ thuộc vào bất cứ framework nào, có khả năng tự động phát hiện ngôn ngữ mà bạn nhúng vào trang web, hỗ trợ hơn 189 ngôn ngữ lập trình phổ biến, cung cấp thêm 94 kiểu style cho các đoạn mã trong trang web . Điểm mình thích ở thư viện này là bạn có thể giảm dung lượng của Highlightjs thông qua việc loại bỏ những ngôn ngữ lập trình mà chúng ta không sử dụng trong quá trình download. Đối với phía máy chủ thì bạn có thể dùng yarn hay npm để cài đặt nhé.

Highlightjs

Rainbow

Rainbow là một thư viện nhỏ gọn được viết bằng Javascript thuần với kích thước chỉ khoảng 2.5kb. Bạn có thể dễ dàng áp dụng vào trang web thông qua việc gọi thuộc tính data-language cho đối tượng mà chúng ta muốn làm nổi bật mã ở trong trang HTML. Ngoài ra nó cung cấp thêm 20 theme CSS giúp bạn có thể lựa chọn style đa dạng hơn cho trang web của mình. Cũng như Highlightjs thì nó có thể chạy trên cả trình duyệt và máy chủ luôn nhé!

Rainbow

Prism

Prism là một thư viện nhẹ với file Javascript chỉ khoảng 2KB(sau khi nén) và file CSS là 1KB(sau khi nén). Nó được nhiều trang web lớn tin tưởng và sử dụng như là smashingmagazine, reactjs, css-tricks... Một số điểm mạnh của thư viện này là dễ dàng kết hợp với thẻ HTML5 bằng cách sử dụng thuộc tính và class cho đối tượng, được xây dựng dựa trên các tiêu chuẩn web hiện đại, có thể thiết lập style cho các theme mà thư viện cung cấp một cách dễ dàng. Điểm mình thích ở Prism là cho phép bạn tải xuống những ngôn ngữ cũng như theme mà mình muốn sử dụng thông qua việc đánh dấu tích vào từng thông tin ở trong một form được thiết kế sẵn (Phần này bạn coi thêm trong Customize your download nhé).

Prism

SHJS

SHJS là một chương trình được viết bằng Javascript giúp bạn dễ dàng làm nổi bật các đoạn mã trong trang HTML. Nó hỗ trợ hầu hết các ngôn ngữ lập trình phổ biến hiện nay cũng như cung cấp thêm nhiều theme để bạn có thể lựa chọn được style phù hợp cho trang web của mình hơn. Để áp dụng được vào dự án thì bạn sẽ phải cần 3 file chính là đoạn mã script chính SHJS, file xác định ngôn ngữ lập trình muốn sử dụng và cuối cùng là file CSS cho việc chọn theme syntax highlight. Việc chia file như vậy sẽ giúp bạn có thể dễ dàng tính chỉnh và mở rộng cho chương trình khi muốn thêm một ngôn ngữ nào đó vào thư viện. Tuy vậy SHJS cũng có một hạn chế là chỉ chạy được trên trình duyệt thôi nhé!

SHJS

Microlightjs

Microlightjs là thư viện mã nguồn mở giúp bạn có thể cải thiện khả năng hiển thị đoạn mã trên trang web. Nó hơi khác các thư viện trên là không cung cấp theme cho từng ngôn ngữ lập trình mà thay vào đó là cung cấp một theme được thiết kế sẵn dành cho tất cả ngôn ngữ. Với mục đích chính là làm nổi bật đoạn mã so với các phần còn lại của trang web. Ngoài ra nó cũng chạy được trên hầu hết các trình duyệt phổ biến hiện nay và đối với phiên bản IE là IE9+ trở lên.

Microlightjs

SyntaxyJS

SyntaxyJS là thư viện giúp bạn dễ dàng làm nổi bật đoạn code của mình ở trong trang web. Nó sử dụng file theme chung cho tất cả cú pháp của các ngôn ngữ lập trình với mục đích giúp bạn có thể dễ dàng tùy chỉnh giao diện để phù hợp với thiết kế của trang web. Điểm mình thích ở thư viện này là có bài viết hướng dẫn chi tiết và đầy đủ về cách thiết lập cũng như cách giải quyết khi gặp phải lỗi trong quá trình sử dụng cho trang web.

SyntaxyJS

Những Công Cụ Giúp Bạn Tạo Highlight Code Online

Phần này mình sẽ đi vào tìm hiểu những công cụ có sẵn giúp bạn có thể làm nổi bật đoạn mã thông qua việc biên dịch đoạn mã thành các phần tử trong trang HTML bằng cách bạn copy đoạn mã mình muốn làm nổi bật -> chọn ngôn ngữ -> chọn theme mình muốn -> copy đoạn mã được trả về sau khi đã xử lý -> dán vào trang HTML. Thật ra những công cụ này giúp bạn thiết lập style một cách tự động cho đoạn code thông qua hai thẻ chính là <pre>, <code> trong HTML.

ONLINE SYNTAX HIGHLIGHTERHighlight your source codeSyntax HighlighterOnline syntax highlighter like TextMateSource Code Highlighter

Một Số Ví Dụ Về Snippets Syntax Highlighting

Syntax Highlight JS Library Demo

See the Pen Syntax Highlight JS Library Demo by 루세나 (Lucena) (@bisk8s) on CodePen.

Prism Syntax Highlighting

See the Pen Prism Syntax Highlighting by Tania Rascia (@taniarascia) on CodePen.

Pure CSS Code Editor

See the Pen Pure CSS Code Editor by Aysha Anggraini (@rrenula) on CodePen.

<pre> tag style (jquery)

See the Pen <pre> tag style (jquery) by romgerman (@romgerman) on CodePen.

Textarea Tabs + Syntax Highlighting

See the Pen Textarea Tabs + Syntax Highlighting by Ashley Ktorou (@aktorou) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thư viện cũng như công cụ tạo syntax highlight hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!