Cách hiển thị code trong bài viết wordpress – Customizable Syntax Highlighter

Khái quát

Nếu bạn đang vô tình vào đọc một bài viết có chia sẻ code, thì bạn sẽ thấy code sẽ được nằm trong một khung rất riêng biệt trong phần còn lại trong bài viết.

Bạn cũng muốn website của chính mình cũng có một khung chứa code làm nổi bật.

Thì hôm nay An Tran Digital sẽ giới thiệu các đến 1 plugin, mình đã thử nhiều plugin thì có vài plugin có thể khó sử dụng, không tương thích 1 vài bản wordpress,.v.v..thì mình thấy plugin Customizable Syntax Highlighter tạo cách hiển thị code trong bài viết wordpress (tạo khung chứa code trong bài viết wordpres) dễ sử dụng và tuỳ biến đa dạng.

🤝 Ủng hộ blog

Đang định mua Hosting, VPS?

Để duy trì blog, nên blog có làm affiliate cho một số nhà cung cấp hosting. Đây đều là những bên uy tín về chất lượng và đội ngũ support nên mọi người cứ yên tâm.

Bạn click vào link bên dưới trước khi mua là đã ủng hộ mình rồi, giá vẫn giữ nguyên. Mình cảm ơn nhiều!

AZDIGI
Pro Gold Hosting Giá rẻ Business Hosting Khuyên dùng VPS Platinum
Tino
Business Hosting NVMe Hosting NVMe VPS
iNET
Cloud VPS Web Hosting
🎁 Nhập mã: ATD10INET (không áp dụng cho tên miền, website)
Nước ngoài
Vultr Hawk Host

Cảm ơn bạn đã ủng hộ blog ❤️

Nó phù hợp với các theme và bản wordpress 5.8.4 mình đang dùng.

THÔNG BÁO: Do plugin trên sẽ có vài phiên bản wordpress không hỗ trợ, nên các bạn có thể cài plugin “Crayon Syntax Highlighter” chức năng các sử dụng cũng như plugin trong bài. An Tran Digital Cảm ơn !!!

Đề xuất xem: Cách ẩn widget trên giao diện mobile cho website

Hướng dẫn cài đặt

Bước 1: Vào Plugin -> Cài mới nhập vào ô tìm kiếm là Customizable Syntax Highlighter – rồi click Cài đặt & Kích hoạt

plugin-chen-code-trong-bai-viet-wordpress-antrandigital — Customizable Syntax Highlighter

Bước 2: Vào Tạo bài viết, chọn vào biểu tượng giống trong hình

plugin-chen-code-trong-bai-viet-wordpress-antrandigital-2 — Customizable Syntax Highlighter

Bước 3: Tiếp theo là chỉ việc để phần Code trong khung -> Nhấn OK

plugin-chen-code-trong-bai-viet-wordpress-antrandigital-3 — Customizable Syntax Highlighter

Đây là kết quả:

<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/>
</td>
<td class='search-button1'>
<input id='search-button1' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

Ngoài ra các bạn có thể tuỳ chỉnh giao diện khung chứa code.

Các bạn vào Enlighter -> Appearance. Ngay mục Theme click chuột vào để cho hiện list cho chọn theme mà bạn ưng ý nhất.

Vừa rồi thì An Trần Digital giới thiệu các bạn cách làm tạo khung chứa code trong bài viết khi đăng lên website.

Cám ơn mọi người đã xem bài viết này.

Chúc mọi người thành công !!!