Blog Số

Home
Tips

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

 Đối với các blogger nói chung thì việc share các đoạn code là chuyện thường ngày rồi , 

Nhưng khi chèn vào bài viết thì nó sẽ rất rối và khó nhìn, Nên hôm nay Tô sẽ hướng dẫn các bạn tạo khung chứa code đẹp và ngầu lòi nhé , 

Chúng ta sẽ dùng mã nguồn Hightlight.js

Thực hiện

Đầu tiên các bạn vào Blogger chọn  CHỦ ĐỀ => TÙY CHỈNH => CHỈNH SỬA HTML

Kéo xuống dưới cùng tìm thẻ </body> và chèn code dưới đây : 


<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>
Nhớ kiểm tra web của bạn xem đã có thư viện jquery chưa nhé, nếu chưa thì thêm vào nhé
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

Nếu như bạn sử dụng giao diện của Jagodesain như Median UI, Fletro Pro thì các bạn tìm tới dòng css

.post pre .........v....v....

và xóa nó đi nhé . Chọn lưu lại vào xem thành quả nhé.

Cách Dùng

Nếu như loại bạn chia sẻ là HTML thì dùng mã này


  <pre class='html'><code>
	Your_code_here
</code></pre>

Nếu là CSS thì dùng mã này


 <pre class='css'><code>
	Your_code_here
</code></pre>

Và JAVASCRIPT thì dùng mã này


  <pre class='js'><code>
	Your_code_here
</code></pre>
Ok đơn giản vậy thôi , 
Tuổi trẻ lông bông , hiện là IT của một công ty tại Bình Dương, Chuyên Design, thiết kế