Plugin giúp hiển thị CODE chuyên nghiệp hơn trong bài viết trên WordPress

Mặc định, Bạn có thể hiển thị souce code trong bài viết của WordPress giống như ở các trình soạn thảo code bằng cách cho nó nằm trong thẻ <pre> </pre>. Điều này không ảnh hưởng gì nếu như website của bạn rất ít đụng tới code hoặc không quan tâm tới việc hiển thị code trong bài viết cho lắm. Đoạn mã khi bạn cho vào thẻ <pre> nó sẽ hiển thị như thế này (có thể tùy theo theme mà bạn đang sử dụng).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>WordPress.com Code Example</title>
</head>
<body>
 <h1>WordPress.com Code Example</h1>
 
 <p><?php echo 'Hello World!'; ?></p>
 
 <p>This line is highlighted.</p>
 
 <p>This line is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long.</p>
 
 <div class="foobar">
 This is an
 example of smart
 tabs.
 </div>
 
 <p><a href="http://wordpress.com/">WordPress.com</a></p>
</body>
</html>

Hiển thị code trong bài viết nỗi bật hơn với plugin SyntaxHighlighter Evolved

Nếu như bạn là một Blogger chuyên giới thiệu, hướng dẫn về code, cần hiển thị code một cách chuyên nghiệp hơn, giống với các trình soạn thảo code chuyên dụng hơn,  thì việc hiển thị mặc định của WordPress trong thẻ <pre> là không đủ. Vì thế mình xin giới thiệu tới mọi người plugin SyntaxHighlighter Evolvedplugin này giúp hiển thị tốt hầu hết các loại code hiện nay, tạo sự nỗi bật cho code trong bài viết, hiển thị code giống hệt như hiển thị trên Notepad++ hoặc Subline Text 2, … và các trình soạn thảo code khác. Khi sử dụng plugin này, code sẽ hiển thị như dưới dây:

SyntaxHighlighter-Evolved

Hướng dẫn cài đặt và sử dụng SyntaxHighlighter Evolved

Bạn có thể tải plugin SyntaxHighlighter Evolved tại https://wordpress.org/plugins/syntaxhighlighter/, plugin hiện giờ đã có trên 400.000 lượt cài đặt.

SyntaxHighlighter-Evolved_f_improf_680x250

Sau khi kích hoạt plugin, bạn cài đặt plugin tại Settings -> SyntaxHighlighter tùy thích, sau đó kéo xuống dưới xem những shortcode bạn dùng khi viết code. Chỉ cần dùng những shortcode đó add vào bài viết là bạn có thể hiển thị code dạng như ở trên rồi.

SyntaxHighlighter-Evolved2

Ví dụ sử dụng:

Nếu như bạn muốn hiển thị một đoạn code HTML hoặc CSS với plugin này, bạn sử dụng shortcode như sau:

SyntaxHighlighter-Evolved1

Nhìn chung đây là một plugin cần thiết giúp bạn hiển thị code chuyên nghiệp hơn trên website của bạn. Nhưng hãy cài đặt nó nếu như bạn thấy mình thật sự cần thiết vì nó sẽ làm website của bạn chậm hơn, mặc dù điều này không đáng kể.

Plugin giúp hiển thị CODE chuyên nghiệp hơn trong bài viết trên WordPress 5.00/5 (100.00%) 1 vote

Hãy bình luận, góp ý bằng Disqus để được hồi đáp nhanh hơn!
Sử dụng Facebook hoặc Google nếu không load được Disqus

Nhận nhiều thông tin bổ ích và quà tặng hấp dẫn
từ MELYWEB

Theo dõi blog MELYWEB để nhận được các tin tức bổ ích, khuyến mãi mới nhất, các quà tặng hấp dẫn.