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

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

0 Share Share Send by Email Copy URL