Syntax Highlighter làm nổi bật code và syntax trong WordPress

SyntaxHighlighter là gì

SyntaxHighlighter là một công cụ giúp làm nổi bật mã nguồn trên trang web của bạn bằng cách áp dụng màu sắc và kiểu chữ phù hợp với ngôn ngữ lập trình.

Ở bài viết này ad sẽ giới thiệu cho các bạn 1 plugin giúp bạn dễ dàng làm nổi bật mã nguồn cú pháp trong WordPress mà đang được chính wordpress.org đang dùng trong các trang như: https://learn.wordpress.org, https://codex.wordpress.org, … đó chính là SyntaxHighlighter Evolved

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved cho phép bạn dễ dàng đăng mã được đánh dấu theo cú pháp lên trang web của mình mà không làm mất định dạng hoặc thực hiện bất kỳ thay đổi thủ công nào.

>> Tham khảo:

• WordPress là gì ? Tại sao nên dùng wordpress để làm website
• Một số code khung viền trang trí cho WordPress

Hướng dẫn làm nổi bật code và syntax với SyntaxHighlighter Evolved

Truy cập vào quản trị admin website WordPress.

Vào Plugins →  Cài mới (Add new). Tìm kiếm Plugin SyntaxHighlighter Evolved → Cài đặt.

Sau đó chọn kích hoạt Active Plugin.

SyntaxHighlighter với trình biên tập Block editor

Để thêm khối SyntaxHighlighter Code , click vào  biểu tượng + Block  Inserter  và tìm kiếm “SyntaxHighlighter Code”. Nhấp vào nó để thêm khối vào bài viết hoặc trang.

Khi bạn nhấp vào khối, một thanh công cụ tùy chọn sẽ xuất hiện phía trên khối đó:

Khối mã SyntaxHighlighter có các tùy chọn sau trên thanh công cụ của nó:

• Thay đổi loại khối.
• Kéo khối.
• Di chuyển khối lên hoặc xuống.
• Căn chỉnh về giữa, phải hoặc trái.
• Thay đổi ngôn ngữ mã (được đặt thành Văn bản thuần túy Plain Text theo mặc định.)

Ngôn ngữ được hỗ trợ

Các ngôn ngữ sau hiện được hỗ trợ trong khối Mã SyntaxHighlighter, sử dụng Thanh công cụ Khối hoặc khu vực Cài đặt khối:

SyntaxHighlighter với trình biên tập Classic editor

Bạn có thể sử dụng mã ngắn shortcode để hiển thị mã trong Trình chỉnh sửa cổ điển (Classic editor)

Một số mã ngắn shortcode ví dụ:

Thông số mã ngắn shortcode

Đây là các tham số bạn có thể chuyển tới shortcode và chức năng của chúng. Đối với các tham số kiểu bật/tắt, chuyển true hoặc false để thiết lập

• lang hoặc language— Cú pháp ngôn ngữ cần đánh dấu. Các ngôn ngữ có sẵn: as3, actionscript3, arduino, bash, shell, coldfusion, cf, clojure, clj, cpp, c, c-sharp, csharp, css, delphi, pas, pascal, diff, patch, erl, erlang, fsharp, go , golang, groovy, haskell, java, jfx, javafx, js, jscript, javascript, latex, tex, matlab, matlabkey, objc, obj-c, Perl, pl, php, plain, text, ps, powershell, py, python , r, splus, Rails, rb, ror, Ruby, scala, sql, swift, vb, vbnet, xml, xhtml, xslt, html, yaml, yml.
• autolinks(true/false)— Làm cho tất cả các URL trong đoạn mã của bạn có thể nhấp được. (bạn có thể setup mặc định trong Setting Plugin)
• classname— Thêm một lớp CSS bổ sung vào hộp mã. (bạn có thể setup mặc định trong Setting Plugin)
• collapse(true/false)— Chuyển đổi thu gọn hộp mã theo mặc định, yêu cầu nhấp chuột để mở rộng hộp. Tốt cho bài viết mã lớn. (bạn có thể setup mặc định trong Setting Plugin)
• firstline— Sử dụng tùy chọn này để thay đổi số dòng bắt đầu đánh số. Nó mặc định là 1.
• gutter(true/false)— Nếu false, việc đánh số dòng ở bên trái sẽ bị ẩn. (bạn có thể setup mặc định trong Setting Plugin)
• highlight— Bạn có thể liệt kê các số dòng bạn muốn làm nổi bật. Danh sách số dòng được phân tách bằng dấu phẩy để đánh dấu.  Bạn cũng có thể chỉ định một phạm vi. Ví dụ:2,5-10,12
• htmlscript(true/false)— Nếu đúng, mọi HTML/XML trong mã của bạn sẽ được đánh dấu. Điều này hữu ích khi bạn trộn mã vào HTML, chẳng hạn như PHP bên trong HTML. Mặc định là sai và sẽ chỉ hoạt động với một số ngôn ngữ mã nhất định.
• light — Nếu đúng, phần gutter (đánh số dòng) và lề (xem bên dưới) sẽ bị ẩn. Điều này hữu ích khi chỉ đăng một hoặc hai dòng mã. (bạn nên setup mặc định là sai trong Setting Plugin)
• padlinenumbers(true/false/integer)— Cho phép bạn kiểm soát phần đệm số dòng. truesẽ dẫn đến phần đệm tự động, falsesẽ không có phần đệm và việc nhập một số sẽ buộc phải có một lượng phần đệm cụ thể. (bạn có thể setup mặc định trong Setting Plugin)
• title(chỉ v3) — Đặt một số văn bản hiển thị trước mã. Rất hữu ích khi kết hợp với collapsetham số.
• toolbar— Chuyển đổi thanh công cụ (các nút trong v2, dấu chấm hỏi trong v3)
• wraplines(chỉ v2) — Chuyển đổi tính năng ngắt dòng.
• quickcode– Kích hoạt chế độ chỉnh sửa khi nhấp đúp chuột.

Nếu muốn đổi các kiểu màu sắc SyntaxHighlighter, Highlighter Version, kiểm soát giá trị mặc định hay thiết lập một vài cài đặt mong muốn khác thì vào Settings → Syntaxhighligher.

Note: trong quá trình sử dụng nếu bị lỗi các kí tự đặc biệt, đọc bài này để khắc phục: Sửa lỗi mã hóa ký tự (double encoding) trong plugin SyntaxHighlighter Evolved

Chúc các bạn thành công !!!