Cách hiển thị trích dẫn code trên bài viết trong blogspot qua 5 bước cơ bản


Bài này hướng dẫn các bạn viết trên blog nhé cũng như html.

 1. Đầu tiên các bạn cần làm đó là mở trang quản trị blogspot của bạn lên, sau đó các bạn vào
2. Chủ đề >>Chỉnh sửa html
3. Sau đó các bạn tìm thẻ <head> và Dán đoạn code này sau thẻ head

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css"/>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>

4. Công việc của bạn chỉ cần lưu lại mẫu html bạn vừa chỉnh sửa thôi.
5. Các bạn vào tạo bài đăng với trình tự như sau.
  • các bạn cứ viết nội dung bình thường.
  • Phần nào các bạn cần hiển thị đoạn trích của code các bạn chuyển sang chế dộ soạn thảo html viết cho mình trong thẻ sau : <pre>nội dung đoạn trích nằm ở đây</pre>
  • Sau khi bạn đặt đoạn trích dẫn trong thẻ <pre>....</pre> thì nó cũng hiển thị rồi. nhưng nó hơi mờ. 
  • công việc còn lại của bạn là thêm đoạn script sau vào cuối bài đăng thì trông trích dẫn code trên bài viết trong blogspot của bạn sẽ đẹp hơn.
<script>
//script initialisation for 'pre' tags
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

</script>

OK. Vậy là các bạn đã hoàn thành việc hiển thị trích dẫn code trên bài viết trong blogspot rồi đấy. Sau đây là hình ảnh minh họa.


Chúc các bạn thành công !