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ước 2: Thêm code vào file footer.php
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.
