LỜI MỞ ĐẦU
Chào các bạn, nếu các bạn đã và đang đọc bài này thì có thể bạn là một developer hay ripper và việc bạn chia sẻ Code lên blog của mình gặp các vấn đề về lỗi trình bày. Thì đây hôm nay mình sẽ hướng dẫn cho các bạn cách trình bày Code lên website/blog một cách chuyên nghiệp và đẹp nhất có thể.
CÁC BƯỚC THỰC HIỆN
BƯỚC 1: Truy cập trang quản trị Blogger/Website, thêm toàn bộ bên dưới vào trước thẻ </head> trong Template/HTML
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
});
//]]>
</script>BƯỚC 2: Cách sử dụng khung chứa code: Các bạn đặt code cần chia sẻ vào giữa thẻ <pre>
Bắt buộc phải mã hóa code trước khi đặt vào giữa thẻ
<pre> Nếu là CSS
<pre class='css'>
<!-- nếu code là CSS -->
</pre>
Nếu là Javascript
<pre class='javascript'>
<!-- nếu code là javascript -->
</pre>
Nếu là HTML
<pre class='xml'>
<!-- nếu code là các thẻ HTML -->
</pre>
Có rất nhiều giao diện khác nhau cho chúng ta lựa chọn, tuy nhiên cái mình share cho các bạn là giao diện tối có tên là Atom-one-dark. Các bạn có thể qua trang chủ của highlight js để có thêm nhiều lựa chọn nhé !
LỜI KẾT
Trên đây là toàn bộ code & hướng dẫn sử dụng khung chứa code phiên bản 9.15.10 (phiên bản mới nhất của highlight js. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!