Site icon Init HTML

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

Admin

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

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.

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

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!

Exit mobile version