Tạo khung chứa code tuyệt đẹp và chuyên nghiệp cho Blogspot sử dụng Highlight Js

Chào các bạn, nếu như tinh ý và có theo dõi blog Bác Sĩ Windows 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>

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!
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Nặc danh18:07 11/7/18

      v thật vừa mới bảo xong ra lun , bsw quá tuyệt vời

      Trả lờiXóa
      Trả lời
      1. Nhiều bạn hỏi quá nên viết luôn cho rồi :D

        Xóa
    2. Trả lời
      1. Đúng là nhanh thật :v nhưng kh nhanh như thằng flash đâu

        Xóa
    3. Trả lời
      1. Giờ có rồi thì share thôi :3

        Xóa
      2. ko thể làm cho cái blockquote cho nhanh gọn hả bác

        Xóa
      3. Bước 1 sửa pre thành blockquote.

        Xóa
    4. Nặc danh13:15 12/7/18

      bsw ơi ra bài viết cứ cuộn chuột là ra bài viết đi , k cần phải phân trang gì hết
      Demo a đang dùng đó :v

      Trả lờiXóa
      Trả lời
      1. Nặc danh14:00 12/7/18

        cái này vẫn phải bấm nút loadmore , a ra bài mà cứ cuộn chuột là có post í a

        Xóa
      2. Trong bài viết có 2 tuỳ chọn.

        Xóa
    5. Blog đẹp, cơ mà sao trên mobile để quảng cáo kho theme mà trên desktop không có

      Trả lờiXóa
    6. Anh có thể hướng dẫn em cách chuyển bài đăng từ trang index dạng gird (lưới) sang dạng list (danh sách) được không anh? Help em

      Trả lờiXóa
      Trả lời
      1. Đơn giản thôi em, chỉ cần viết lại toàn bộ CSS hiển thị bài viết sạng gird thành dạng list thôi.

        Xóa
      2. Anh cho em xin mail với ạk, giúp em nha =)

        Xóa
      3. Anh còn cái project chưa làm xong nên kh giúp được đâu em, có gì anh chỉ sơ sơ ở đây thôi.

        Xóa
      4. Dạ vậy cũng đc anh và cũng cảm ơn anh đã bỏ ít time ra để help ạ
        Site https://www.phucstar-it.tk/
        Anh xem hộ em vs ạ

        Xóa
      5. Thêm phía sau thẻ ]]></b:skin>
        <b:if cond='data:blog.pageType != "item"'>
        <style>
        .post-image{width:300px;margin:0 15px 0 0}
        .post-outer{width:100%;height:unset}
        .postdata2{position:unset}
        .postdata,.post-body{display:inline}
        article div{clear:unset}
        </style>
        </b:if>
        .
        Tìm trong thẻ <div class='post-outer'> và xóa hết những thẻ có dạng như này: style='clear:both'
        .
        Sau khi làm xong sẽ được kq: xem ảnh.

        Xóa
      6. Dạ em cám ơn anh nhiều lắm ạ, hổ trợ nhiệt tình vl ^.^
        Thanks so much

        Xóa
      7. Cơ mà sao em làm ko đc anh ạ :(

        Xóa
      8. Rõ ràng anh làm được như ảnh kia mà, em xem lại xem.

        Xóa
      9. Em tìm trong thẻ [pre html][/pre html] thì ko có cái thẻ nào dạng style='clear:both hết anh ơi :(

        Xóa
      10. Vãi chưởng, ko hiện :((

        Xóa
    7. Nặc danh20:15 18/7/18

      a Trường ơi cho e xin code chuyển hướng trang , mới thay domain

      Trả lờiXóa
    8. sao khung code của em nó không rộng ra được như anh mà nó có một dòng dị à

      Trả lờiXóa
    9. Do code của em đó, khi viết không xuống dòng.

      Trả lờiXóa
    10. em có xuống dòng như khi cho vào pre thì nó thẳng dị luôn -_-

      Trả lờiXóa
    11. Có cách gì phân biệt sự khác nhau cỉa 3 thẻ pre đó không Ad

      Trả lờiXóa