Tạo Khung Chứa Code Tuyệt Đẹp Và Chuyên Nghiệp Cho Blogspot Sử Dụng Highlight Js

Đặng Tiến Sĩ Tác giả:
Xuất bản: Chủ Nhật, 25 tháng 11, 2018 -

Chào các bạn, nếu như tinh ý và có theo dõi blog Sĩ Ben IT từ lâu chắc hẳn các bạn cũng nhận ra điều mới thay đổi gần đây trên blog mình, đól à Theme mới và kèm theo đó là khung chứa code mới. Khung chứa code lần này không đơn thuần chỉ là một background và một border đơn giản nhạt nhòa nữa, mà nó rất nhiều màu sắc, phân chia ra từng cụm từ khóa trong đó, trông rất đẹp và chuyên nghiệp.


Sử dụng highlight javascript, chúng ta có thể dễ dàng tạo ra khung đựng code này trong 3 nốt nhạc mà không cần phải làm quá nhiều! Bài viết này mình sẽ hướng dẫn các bạn tạo khung chứa code đó, bên cạnh đó cũng trả lời yêu cầu của nhiều bạn gửi đến cho mình, hứa sẽ làm mà đến hôm nay mới có thời gian viết hướng dẫn.

Cách thực hiện

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>

và lưu lại.

Cách sử dụng

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>

Ngoài ra bạn củng có thể thay đổi các mẫu nền. Bằng cách truy cập vào đây highlight js

Bạn có thể ghé qua trang chủ của highlight js để xem các mẫu nhé. Chúc thành công!

Thích
Bình luận



Không có nhận xét nào. bạn hãy là người đầu tiên.


Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ