Cách hiển thị code trên WordPress site

Khi viết bài về PHP, HTML, JavaScript, CSS…chúng ta sẽ cần sử dụng code để làm ví dụ minh họa. Tuy nhiên nếu như bạn thêm một đoạn code như văn bản bình thường, WordPress sẽ không hiển thị chính xác. Nhằm tăng cường bảo mật, WordPress sử dụng một số bộ lọc ngăn ngừa việc tin tặc chèn các đoạn code vào bài viết để tấn công website của bạn. Trong bài viết này tôi sẽ chia sẻ cách hiển thị code trên WordPress site.

Cách 1: Hiển thị code bằng sử  dụng Editor mặc định của WordPress

Cách này dành cho người mới và những người ít khi hiển thị code trong bài viết.

Bạn chỉ cần chỉnh sửa bài viết hoặc trang mà mình muốn hiển thị code.

Trong màn hình chỉnh sửa bài viết, hãy thêm một khối Code vào bài viết của bạn.

insert code block to your post

Giờ bạn hãy nhập đoạn code vào khối Code.

add code to block

Sau đó bạn hãy lưu lại nội dung bài viết và xem thử khối Code hoạt động như thế nào.

Đoạn code hiển thị tùy theo WordPress Theme mà bạn đang sử dụng.

Cách 2. Sử dụng plugin để hiển thị code

Với cách này chúng ta sẽ cài đặt plugin để hiển thị code trong bài viết. Cách này phù hợp với những người thường hiển thị code trên trang web của mình.

Nó cung cấp cho bạn một số tính năng mở rộng nếu so sánh với khối Code mặc định của WordPress.

  • Nó cho phép bạn hiển thị bất kỳ đoạn code nào của bất cứ ngôn ngữ lập trình nào.
  • Nó hiển thị code với cú pháp được làm nổi bật và số dòng code.
  • Người dùng có thể dễ dàng học code và copy nó.

Việc đầu tiên bạn cần làm là cài đặt plugin có tên là SyntaxHighlighter Evolved.

syntaxhightterevolved

Nếu bạn là người mới, chưa biết cách cài đặt plugin hãy đọc lại bài viết Hướng dẫn cài đặt và quản lý plugin trong WordPress.

Sau khi kích hoạt, bạn hãy mở bài viết mà mình muốn chỉnh sửa lên.

Trong màn hình chỉnh sửa bài viết, hãy thêm khối ‘SyntaxHighlighter Code’ vào bài viết của mình.

insert syntaxhightlight code block

Giờ bạn có thể thấy một khối Code mới. Hãy nhập đoạn code mà mình muốn hiển thị vào. Sau khi hoàn thành việc nhập code, bạn hãy chọn các thiết lập ở cột phía bên phải.

code block settings

Trước tiên bạn cần chọn ngôn ngữ lập trình của đoạn code. (Ví dụ: PHP, CSS, HTML…).

Sau đó bạn có thể bật/tắt hiển thị số thứ tự của dòng, dòng đầu tiên bắt đầu từ số mấy, làm nổi bật bất kỳ dòng nào mà bạn muốn và bật/tắt tính năng có thể nhấp vào liên kết.

Sau khi xong, hãy lưu lại và nhấp vào nút Preview để xem thử plugin hoạt động như thế nào.

display code in post

Plugin cho phép bạn phối màu sao cho phù hợp với WordPress Theme mà bạn đang sử dụng.

Để thay đổi màu, bạn truy cập vào trang Settings » SyntaxHighlighter.

syntaxhighligher settings

Trên trang cài đặt, bạn có thể chọn màu và thay đổi các thiết lập khác.

Bạn có thể lưu lại các cài đặt và xem trước Code Block ở bên dưới của trang.

preview code block

Sử dụng SyntaxHighlighter trong Classic Editor

Nếu bạn vẫn còn đang sử dụng trình soạn thảo cũ của WordPress, thì đây là cách sử dụng plugin SyntaxHighlighter để thêm code vào bài viết của mình.

Để chèn code, bạn chỉ cần để đoạn code bên trong dấu ngoặc vuông và tên ngôn ngữ.

Ví dụ:

[php]
<?php
private function get_time_tags() {
$time = get_the_time(‘d M, Y’);
return $time;
}
?>
[/php]

Tương tự, nếu bạn muốn thêm mã HTML, bạn cần để đoạn mã HTML bên trong cặp dấu

như bên dưới:

<a href=”example.com”>A sample link</a>

Cách 3. Hiển thị code thủ công trong WordPress

Đây là cách nâng cao dành cho người có nhiều kinh nghiệm và kiến thức về lập trình. Vì không phải lúc nào nó cũng hoạt động chính xác.

Nó thích hợp với những người đang sử dụng trình biên tập cũ, muốn hiển thị code nhưng không muốn dùng plugin.

Để làm được việc này bạn cần chuyển đổi mã thông qua công cụ trực tuyến tại đây.

Công cụ này giúp bạn chuyển đổi các mã lệnh thành các thẻ HTML. Nó giúp bạn có thể thêm code mà không bị chặn bởi các bộ lọc của WordPress.

Giờ bạn hãy copy và dán mã này vào trong trình biên tập và để nó nằm trong thẻ <pre> và <code>.

Đoạn code của bạn sẽ trông như thế này.

Giờ bạn hãy lưu lại nội dung bài viết của mình và xem thử nó hoạt động như thế nào.

Trình duyệt web sẽ chuyển đổi các phần tử HTML và người dùng có thể nhìn thấy, copy nó một cách chính xác.

Tôi hy vọng bài viết này sẽ giúp bạn biết cách hiển thị code trong WordPress.

Nếu bạn thấy bài viết hữu ích, đừng quên Like và Share.

Hẹn gặp lại bạn trong bài viết tiếp theo./.

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Để lại bình luận