HighlightJS tự động làm nổi bật cú pháp pre, code

Mình đã từng sử dụng qua nhiều plugin làm nổi bật cú pháp trong wordpress. Tuy nhiên các plugin này chưa làm hài lòng. Đặc biệt là tính năng tự động làm nỗi bật cú pháp thay vì phải chỉnh sửa từng bài viết để tạo "Block hightlight" hoặc phải thêm các thuộc tính attr như class.

Sau một thời gian thì mình đã tìm được HighlightJS.

Giới thiệu về HighlightJS

Đây là một công cụ làm nổi bật cú pháp được viết bằng JavaScript, hỗ trợ hơn 180 ngôn ngữ. Nó không phụ thuộc vào bất kỳ khung nào khác và có tự động phát hiện ngôn ngữ.

Dưới đây là một ví dụ tệp html trước và sau khi sử dụng Highlight JS.

Cách dùng cơ bản

Tự động đánh dấu mã

Để sử dụng bạn cần phải nhúng 2 tệp js và css vào website để Highlight JS có thể hoạt động. Mã hljs.highlightAll() mặc định sẽ tự động tìm và đánh dấu mã bên trong thẻ <pre> <code>.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Đánh dấu mã thủ công

Nếu bạn muốn chỉ định ngôn ngữ cụ thể nào đó mà bạn muốn có thể sử dụng thuộc tính class="language-xxx" cho thẻ <pre>, <code> đó.

<code class="language-php">...</code>
<pre class="language-css"><code>...</code></pre>

Bỏ qua đánh dấu khối mã

Để bỏ qua hoàn toàn việc đánh dấu một khối mã, hãy sử dụng class="nohighlight".

<code class="nohighlight">...</code>
<pre class="nohighlight"><code>...</code></pre>

Cách dùng nâng cao

Theo như nhà phát triển thì mặc định nó chỉ phát hiện ngôn ngữ và tô màu chứ không có các tùy chọn như đánh số line numbers hay nút copy.

Tuy nhiên, chúng ta vẫn có thể làm việc đó nhờ các DEV trên github phát triển thêm các tính năng.

Đánh số Line Numbers

Để thêm tính năng đánh số bạn cần nhúng thêm tệp highlightjs-line-numbers.js

<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@latest/dist/highlightjs-line-numbers.min.js"></script>

Sau đó gọi hàm hljs.initLineNumbersOnLoad() ngay phía sau hljs.highlightAll()

<script>
  hljs.highlightAll();
  hljs.initLineNumbersOnLoad();
</script>

Nút copy code

Mình chỉ mới tìm thấy phần mở rộng này ở highlightjs-copy. Bạn có thể tham khảo thêm để custom theo ý của bản thân.

Vẫn như Line Numbers bạn cần nhúng thêm tệp JS và CSS để tùy chỉnh nút copy.

<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css" />

Khác với line numbers, bạn nên đặt hàm hljs.addPlugin(new CopyButtonPlugin()) trước hljs.highlightAll()

<script>
  hljs.addPlugin(new CopyButtonPlugin());
  hljs.initLineNumbersOnLoad();
</script>

Custom tệp js và css

Bạn có thể tải tệp js, css và lưu nội bộ trong website. Nó cũng có tùy chọn ngôn ngữ để người dùng tạo thành một tệp JS riêng.

CSS cũng vậy. Bạn có thể lựa chọn những theme syntax tùy theo sở thích tại Styles Github.

Nguồn tham khảo: highlightjs.org