Cách tạo khung chứa code đẹp mắt cho blogger

Thỉnh thoảng các bạn muốn chia sẽ những đoạn code hay trên blog của mình nhưng khi post lên thì thấy các đoạn code nó trông rời rạc và nhạt nhòa. Bài đăng này mình sẽ hướng dẫn các bạn cách để chèn đoạn code lên bài đăng một cách chuyên nghiệp và đẹp mắt nữa nhé

Code sau khi đưa vào khung đầy đủ màu sắc và đẹp mắt

Khung chứa code mà mình chia sẽ ở đây sẽ giúp cho đoạn mã có rất nhiều màu sắc, phân chia ra từng cụm từ khóa trong đó giúp tăng sự cuốn hút cho người đọc. Đoạn mã có tên highlight javascript và chỉ cần chèn 1 lần vào Html của blog là xong thôi


Cách thực hiện như sau:  Truy cập trang quản trị Blogger, thêm toàn bộ bên dưới vào trước thẻ </head> trong Template.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
//]]>
</script>

Bước tiếp theo các bạn chỉ việc lưu lại là xong nhé Cách sử dụng như sau Các bạn đặt code cần làm nổi bật vào giữa thẻ <pre> như này:

 CSS

 <pre class='css'>
<!-- nếu code là CSS -->
</pre>

 Javascript

 <pre class='javascript'>
<!-- nếu code là javascript -->
</pre>

 HTML

<pre class='xml'>
<!-- nếu code là các thẻ HTML -->
</pre>

 Tùy biến 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 sử dụng là giao diện tối có tên là Atom-one-dark Còn đây là giao diện sáng có tên là Atom-one-light

Khung chứa code với giao diện màu sáng

Blog của mình dùng kiểu atom-one-light như các bạn thấy ở trên nhé