Home
Blogger
CODE

TẠO KHUNG CHỨA CODE CHUYÊN NGHIỆP VÀ ĐẸP CHO BLOGSPOT/WEBSITE

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ả !!!
Bài viết liên quan:

Post a Comment