để tạo một khung chứa code cho blog của bạn nhìn đẹp mắt hơn ,thì với bài viết này mình sẽ hướng dẫn các bạn cách tạo một khung chứa code màu mè đệp mắt sử dụng mã nguồn Highlight.js chúng ta cùng bắt đầu luôn nhé
cách tạo khung chứa code đẹp
Các bạn hãy tìm tới thẻ đóng 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> đặt code tại đây</code></pre>
Nếu là CSS thì dùng mã này
<pre class=‘css’><code>đặt code tại đây</code></pre>
Và Javascript thì dùng mã này
<pre class=‘js’><code> đặt code tại đây</code></pre>