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
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
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é

2 Nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

  1. Khá là đơn giản chỉ cần chút CSS là đẹp ngay. Thanks!

    Trả lờiXóa
    Trả lời
    1. Tuyệt vời nhé.. Thank bạn đã góp ý và phản hồi nhé 🤩👍

      Xóa
Mới hơn Cũ hơn