×

Chia sẻ code đầy màu sắc không cần sử dụng plugin & tối ưu tốc độ tải trang

Chia sẻ code là một điều không thể thiếu đối với một lập trình viên WordPress, tuy nhiên việc sử dụng plugin để hiển thị code thường làm giảm tốc độ tải của trang web. Sau một hồi nghiên cứu thì mình chợt suy nghĩ, có nên tiếp tục sử dụng plugin nữa hay không, và tất nhiên là không rồi, tốt hơn hết vẫn nên sử dụng code để tối ưu tốc độ tải trang, thì với bài viết này mình sẽ hướng dẫn các bạn cách để hiển thị code đầy màu sắc mà không giảm đi điểm đánh giá về web.

Code hiển thị code màu sắc cho WordPress

Bước 1: Thêm file prettify.js vào theme

Đầu tiên bạn cần tải về, giải nén file js bên dưới và up nó lên thư mục theme mà bạn đang sử dụng là xong.

Bạn sao chép toàn bộ code bên dưới dán vào trên thẻ đóng </body> của file footer.php trong thư mục theme mà bạn đang sử dụng là xong.

<?php if( is_single() ) { ?>
<!-- xoá jquey này đi nếu web bạn đã có sẵn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('pre').addClass('prettyprint lang-html linenums');
});
</script>
<style>
/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #222;border-radius:5px;border:0px;}
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff } /* punctuation */
pre .pln { color: #fff } /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
color: #999;
list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
background: #000;
}
</style>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/prettify.js"></script>
<?php } ?>

<?php if( is_single() ) { ?> Code <?php } ?>
Với code check này mục đích của mình là chỉ muốn nó hiển thị code đó ở post và page, điều này sẽ giúp trang chủ của bạn không phải tải các file js, và mã css, jQuery ở trên, giúp cải thiện tốc độ tải trang chính.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
Thông thường các theme đã bao gồm jQuery mặc định, tuy nhiên một số theme mình kiểm tra thì không thấy có, nếu theme của bạn có sẵn jQuery mặc định thì có thể xoá dòng này đi.

Chia sẻ code đầy màu sắc không cần sử dụng plugin & tối ưu tốc độ tải trang
Cách thêm code vào bài viết của bạn.
Chia sẻ code đầy màu sắc không cần sử dụng plugin & tối ưu tốc độ tải trang
Code hiển thị ở bài viết rất đẹp trai phải không..

1316
"Nếu bạn cảm thấy bài viết này hữu ích, bạn có thể ủng hộ cho tác giả một tách Cafe"
THANH TOÁN ỦNG HỘ
Sacombank
NGUYEN NGOC HOAN
040086597979
Đọc thêm bài khác
×
Chia sẻ trang này tới
QR:  Chia sẻ code đầy màu sắc không cần sử dụng plugin & tối ưu tốc độ tải trang