Search by category:
Cách hiển thị code trong WordPress đơn giản nhất
WORDPRESS

Cách hiển thị code trong WordPress đơn giản nhất

WordPress là một mã nguồn mở tuyệt vời cho phép bạn tùy biến mọi thứ. Vậy nếu bạn tìm thấy được một đoạn code hay thì làm sao có thể chia sẻ cho mọi người trong WordPress. Nếu chỉ viết bình thường thì họ sẽ rất khó phân biệt được chính xác các cú pháp trong đoạn code đó. Và đây sẽ là cách giúp bạn hiển thị code trong WordPress đơn giản nhất.

Đầu tiên bạn hãy cài đặt và kích hoạt plugin SyntaxHighlighter Evolved. 

Sau đó vào trang quản trị » Settings » Syntax Highlighter Evolved để cấu hình cho plugin.

Cách hiển thị code trong WordPress
Plugin Syntax Highlighter

Bạn có thể giữ nguyên các thiết lập mặc định hoặc thay đổi tùy ý.

Sau khi tùy chỉnh, bạn nhấn vào nút Save Changes để xem chế độ Preview ở phần cuối cùng.

Syntax Highlighter Evolved sử dụng Shortcodes để hiển thị code. Do đó, với mỗi ngôn ngữ lập trình khác nhau, bạn phải bỏ code vào trong phần shortcodes của ngôn ngữ đó.

CÁCH HIỂN THỊ CODE TRONG WORDPRESS VỚI PHP

Ví dụ mình sẽ bỏ đoạn code vào trong cặp PHP như sau:

Cách hiển thị code trong WordPress

Và nó sẽ hiển thị là:

 
<?php $u_time = get_the_time('U'); 
$u_modified_time = get_the_modified_time('U'); 
if ($u_modified_time >= $u_time + 86400) { 
echo "Cập nhật ngày "; 
the_modified_time('d/m/Y'); 
echo " lúc "; 
the_modified_time(); 
echo ""; } ?> 

CÁCH HIỂN THỊ CODE TRONG WORDPRESS VỚI CSS

Tương tự mình bỏ đoạn code vào trong cặp css như sau:

Cách hiển thị code trong WordPress

Và nó sẽ hiển thị là:

body {
font-family: "Merriweather", Gerogia, serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.5em;
color: #333;
background: #f5f5f5;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Syntax Highlighte Evolved sẽ tự động thêm số dòng và thụt lề chính xác cho bạn. Vì ở đây mình chỉ lấy các đoạn code ngắn không có tab nên các bạn sẽ không thấy rõ sự khác biệt.
Trên đây là cách hiển thị code đơn giản trong WordPress. Nếu bạn có cách nào hay hơn xin hãy chia sẻ ở phần bên dưới nhé.

 

Post Comment