Tạo khung chứa code tuyệt đẹp và chuyên nghiệp cho blogger

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>

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

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