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

 Hello các bạn, nếu như các bạn có để blog mình thì có thể thấy được khung chia sẻ code của mình có rất nhiều màu rất là đẹp đẽ đúng không ạ? Nay mình sẽ chia sẻ lại cho các bạn cách tạo nhé.
Trong bài viết này chúng ta sẽ sử dụng mã nguồn Highlight.js nhé

Thực Hiện

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>