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, thì việc hiển thị mặc định của WordPress trong thẻ <pre> là không đủ. Bài viết này giới thiệu các Plugins hỗ trợ trong việc hiển thị code cho bài viết của bạn.

Hiển thị CODE trong bài viết WordPress

Dưới đây là danh sách một số plugins hỗ trợ hiển thị code trong bài viết WordPress.

Crayon Syntax Highlighter

Crayon Syntax Highlighter

Plugin này có thể nói là tốt nhất để chèn code vào bài viết của bạn, vì nó có hỗ trợ sẵn giao diện, chỉ cần sao chép và dán. Với rất nhiều tùy chỉnh khác bên trong.

Xem thêm

Sử dụng

Mở giao diện chèn của Crayon trong trình soạn thảo của WordPress, chọn ngôn ngữ cần hiển thị rồi dán mã nguồn của bạn vào là xong.

Chèn mã nguồn - Crayon

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved

Thêm một plugin rất dễ sử dụng và có rất nhiều tùy chỉnh nữa.

Xem thêm

Sử dụng

Bạn cần thêm khối lệnh [ngôn ngữ][/ngôn ngữ] vào trước và sau đoạn mã của bạn. Ví dụ:

[css]
/* Footer */
.footer-block {
    font-size: 13px;
}

.footer-block a {
    color: #7E7E7E;
}

.footer-block a:hover, .footer-block a:focus {
    color: #fff;
}

.footer-link {
    background: #252525;
    padding-top: 30px;
    padding-bottom: 40px;
    color: #919191;
}

.footer-link h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    color: #ddd;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
}
[/css]

WP Code Prettify

WP Code Prettify

Plugin này hiển thị đẹp nhưng hơi khó sử dụng, và tùy chỉnh cũng rất ít. Đây là plugin Init HTML đang sử dụng, bạn có thể xem demo ngay tại trang.

Xem thêm

Sử dụng

Nếu muốn hiển thị giống trang này, bạn cần chọn giao diện là son-of-obsidian, và thêm đoạn CSS sau.

pre.prettyprint{background-color:#232323;border-radius:0;padding:20px;font-size:16px;color:#fff;margin:0 0 25px}pre::-webkit-scrollbar{width:6px;height:6px}pre::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);-webkit-border-radius:5px;border-radius:5px}pre::-webkit-scrollbar-thumb{-webkit-border-radius:5px;border-radius:5px;background:rgba(0,0,0,.3);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}pre::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.3)}pre{margin-bottom:25px}

Để chèn mã nguồn, bạn cần đặt class="prettyprint" thẻ <pre></pre>, ví dụ:

<pre class="prettyprint">
/* Footer */
.footer-block {
    font-size: 13px;
}

.footer-block a {
    color: #7E7E7E;
}

.footer-block a:hover, .footer-block a:focus {
    color: #fff;
}

.footer-link {
    background: #252525;
    padding-top: 30px;
    padding-bottom: 40px;
    color: #919191;
}

.footer-link h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    color: #ddd;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
}
</pre>

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

Series: Thủ thuật WordPress