Tạo Khung Chứa Code Cho Blogspot Đẹp Với Highlight Js

Hôm nay mình sẽ chia sẻ lại cho các bạn cách Tạo Khung Chứa Code Cho Blogspot Đẹp Với Highlight Js cực kì đơn giản.

Trong bài viết này chúng ta sẽ sử dụng mã nguồn Highlight.js nhé.

Tạo Khung Chứa Code Cho Blogspot Đẹp Với Highlight Js

Các bạn hãy tìm tới thẻ đóng </body> và chèn đoạ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>

Nếu như giao diện của bạn chưa có jquery thì hay thêm đoạn này vào nha

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</script>

Sau đó lưu lại và hưởng thụ thành quả.

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 span{color:var(--highlight-green)} .post pre span.block{color:#fff;background:var(--highlight-blue)}

Hưỡng Dẫn Cách Sử 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>

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

quangsangblog