Share Sử dụng thư viện Prism để highligh mã ngôn ngữ lập trình

filiallion · 05/27/2019

Nếu các bạn là lập trình viên đang muốn xây dựng website chia sẻ kiến thức lập trình thì chắc chắn các bạn sẽ cần tích hợp chức năng highligh mã lập trình để giúp cho người đọc dễ dàng xem các đoạn mã lệnh của các bạn. Hiện nay, có nhiều thư viện dùng để highligh mã lệnh và một trong số đó phải kể đến là thư viện Prism.

Prism là một thư viện JavaScript được phát triển rất chuyên nghiệp bởi một nhóm các lập trình viên tài năng trên thế giới. Vì vậy, thư viện Prism hiện tại đang được rất nhiều người sử dụng, kể cả các thư viện nổi tiếng như TinyMCE cũng sử dụng Prism để tích hợp.

Nhiệm vụ của thư viện Prism là highligh các mã lập trình của rất nhiều ngôn ngữ lập trình phổ biến hiện nay như HTML, CSS, JavaScript, PHP, SQL, C#,... Thư viện Prism hiện tại hỗ trợ tới 176 ngôn ngữ lập trình. Ngoài ra, với khả năng tuỳ chỉnh, định dạng lại kiểu mẫu hiển thị, các bạn hoàn toàn có thể tự thiết kế kiểu mẫu riêng mà không gặp khó khăn nào.

Để sử dụng thư viện Prism, các bạn truy cập địa chỉ https://prismjs.com/download.html và tải về. Sau đó, các bạn tích hợp vào website với nội dung mã lệnh HTML như sau:

HTML:

<link href="path/to/prism.css" rel="stylesheet">
<script src="path/to/prism.js"></script>

Bây giờ, các bạn chỉ việc sử dụng thư viện Prism để highligh mã lệnh lập trình của các bạn như ví dụ sau:

HTML:

<pre><code class="language-css">h1 { color: #0062af; }</code></pre>

Trên đây là ví dụ highligh mã CSS, nếu các bạn muốn highligh mã ngôn ngữ lập trình khác thì các bạn có thể sử dụng theo mẫu sau:

Code:

<pre><code class="language-Tên_ngôn_ngữ">Nội_dung_mã_lệnh</code></pre>

Các bạn có thể xem tất cả các ngôn ngữ lập trình mà thư viện Prism hỗ trợ tại địa chỉ https://prismjs.com.

Share Sử dụng thư viện Prism để highligh mã ngôn ngữ lập trình

filiallion

Administrator