Tạo Khung Chứa Code Tuyệt Đẹp Và Chuyên Nghiệp Cho Blog / Website - Phiên Bản Mới

- Trong quá trình làm việc, cũng như là trong quá trình viết bài, khó tránh khỏi sai sót, rất mong các bạn, anh chị em bỏ qua. Đồng thời do trình độ lập trình & kinh nghiệm thực tiễn còn hạn chế nên giao diện và bài viết còn nhiều lỗi ! Em rất mong nhận được ý kiến đóng góp từ mọi người, để bản thân học hỏi thêm được nhiều kinh nghiệm và sẽ cố gắng hoàn thiện trong tương lai. Em xin chân thành cảm ơn !
- Mọi chi tiết xin liên hệ:
• Phone number: 038.689.7757
• Facebook: fb.com/leanhduc.pro.vn
• Email: Admin@leanhduc.pro.vn

LỜI MỞ ĐẦU

Chào các bạn, nếu bạn là một blogger, coder, developer hay ripper thì chắc hẳn việc sử dụng và chia sẻ code không còn quá xa lạ! Bài viết này mình sẽ hướng dẫn các bạn tạo khung chứa code đơn giản, đẹp và chuyên nghiệp bằng việc sử dụng highlight javascript =))

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ả !!!

Copyright © Lê Anh Đức

Không có nhận xét nào