Highlight code với Prism.js trong WordPress

Prism là một thư viện Javascript giúp highlight các đoạn code được sử dụng rất phổ biến, trong bài này mình sẽ hướng dẫn các bạn tích hợp nó chỉ trong vài bước đơn giản mà không cần dùng tới plugin.

Bước 1: Tải Prism js/css

Tại trang chính thức của Prism, bạn nhấp vào nút Download.

(1) bạn chọn Minified version, (2) chọn giao diện mà bạn muốn sử dụng (ở đây mình chọn Okaidia), (3) chọn ngôn ngữ mà bạn sử dụng, nếu không chắc chắn bạn có thể nhấn vào nút Select all (chọn tất cả), điều này sẽ làm tăng kích thước file js.

(4) bạn sẽ chọn các plugin muốn sử dụng đi kèm, ở đây với hiển thị cơ bản nên mình không dùng bất cứ plugin nào, (5) Download JS, (6) Download CSS.

Bước 2: Upload files lên thư mục theme của bạn

Sau khi tải xuống, bạn upload 2 file prism.js và prism.css lên thư mục theme của bạn đang sử dụng wp-content/themes/{your-theme-name}

Bước 3: Load files từ functions.php

Mở file functions.php và thêm đoạn code này vào:

// functions.php
function add_prism() {
    wp_enqueue_style( 'prism-css',  get_stylesheet_directory_uri() . '/prism.css' );
    wp_enqueue_script( 'prism-js',  get_stylesheet_directory_uri() . '/prism.js', [], false, true );
}
add_action( 'wp_enqueue_scripts', 'add_prism' );

Cách sử dụng Prism

Trình soạn thảo Classic

Chỉnh sửa HTML (bằng cách bật qua Text tab)  và bọc đoạn code của bạn trong các thẻ <pre class="language-php"><code>...</code></pre>.

Nếu đoạn code của bạn có chứ dấu <,  bạn cần xoá chúng đi hoặc sử dụng plugin Unescaped markup (https://prismjs.com/plugins/unescaped-markup/). Khi sử dụng plugin này, bạn cần thay thế các thẻ <pre><code>  bằng thẻ <script>.

Trình soạn thảo Gutemberg

Thêm một khối Paragraph và chọn nó là Code

Sau đó, nhấp vào Advanced và thêm class của ngôn ngữ bạn sử dụng vào, ví dụ nếu bạn sử dụng php bạn điền language-php, nếu là css thì language-css,  v.v.

Ngoài ra, bạn có thể sử dụng một khối HTML <pre class="language-php"><code>...</code></pre> như trình cổ điển.