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

Hiển thị trích dẫn code trên bài viết trong blogspot giúp bạn chia sẻ những code hay của mình cho mọi người biết mà không ảnh hưởng tới phong cách diễn đạt của bài viết.Sau đây Web Hay chia sẻ bạn cách để bạn  hiển thị trích dẫn code trên bài viết trong blogspot/web như sau :

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 !

Bình Luận Của Bạn

vungve.com không chấp nhận bình luận thiếu văn hóa

Mới hơn Cũ hơn