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!
  1. 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. Ai làm tiếp đi :v làm 1 mình không xuể

      Xóa
  4. 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
  5. 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. Đây: https://www.bacsiwindows.com/2018/07/tao-phan-trang-bang-nut-load-more-su-dung-ajax-load-more-javascript-cho-blogspot.html

      Xóa
    2. 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
    3. Trong bài viết có 2 tuỳ chọn.

      Xóa
  6. 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
    Trả lời
    1. Thank you! Desktop thấy không cần thiết :D

      Xóa
  7. 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
    11. Muốn cmt code phải mã hóa trước.

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

    Trả lờiXóa
    Trả lời
    1. https://www.bacsiwindows.com/2018/01/tao-code-chuyen-huong-cho-trang-web-bang-html-va-javascript.html

      Xóa
  9. sao em thêm nó ngang ra thôi chứ không mở rộng được như anh nhỉ https://www.quocbaoblog.xyz/2018/09/share-windget-theo-doi.html

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

      Xóa
    2. Do code của em đó, khi viết không xuống dòng.

      Xóa
    3. em có xuống dòng như khi cho vào pre thì nó thẳng dị luôn -_-

      Xóa
    4. Cài đặt bài đăng chọn nhấn enter để xuống dòng nhé.

      Xóa
CÓ THỂ BẠN ĐANG TÌM