Share Định dạng cú pháp mã lệnh để hiển thị trên website với thư viện Highlightjs

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Đối với các website về công nghệ thông tin như chia sẻ bài viết về lập trình thì việc định dạng các nội dung mã lệnh là rất cần thiết để cho người dùng có thể đọc được nội dung mã lệnh dễ dàng. Hiện tại có rất nhiều thư viện để thực hiện chức năng này như Prismjs, Rainbow..., với bài viết này thì tôi giới thiệu với các bạn thư viện Highlightjs, đây là một thư viện ra đời từ khá lâu và được sử dụng rộng rãi hiện nay.

Để sử dụng thư viện Highlightjs các bạn cần phải tích hợp jQuery. Các bạn có thể tải thư viện jQuery tại địa chỉ http://jquery.com/download.

Thư viện Highlightjs các bạn có thể tải tại địa chỉ https://highlightjs.org/download.

Các bạn tích hợp thư viện Highlightjs vào website với nội dung mã lệnh như sau:
HTML:
<link href="path/to/styles/default.css" rel="stylesheet">
<script src="path/to/highlight.pack.js"></script>
Để áp dụng chức năng định dạng cú pháp mã lệnh trên website các bạn khai báo nội dung mã lệnh như sau:
JavaScript:
$(function() {
    hljs.initHighlightingOnLoad();
});
Và để định dạng khối mã lệnh nào thì các bạn có thể sử dụng như ví dụ sau:
HTML:
<pre>
    <code class="html"><h1>Welcome to Gextend</h1></code>
</pre>
Trong đó, dòng lệnh <h1>Welcome to Gextend</h1> là nội dung mã lệnh mà các bạn muốn định dạng.

Trên đây chỉ là một ví dụ đơn giản để sử dụng thư viện Highlightjs. Các bạn có thể tham khảo thêm về thư viện Highlightjs tại địa chỉ https://highlightjs.org/usage.
 
Back
Top