Chuyển tới nội dung

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

  • bởi
Tạo khung chứa code

để 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 

DEMO

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> đặ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>

1/5 - (1 bình chọn)

Trả lời

Email của bạn sẽ không được hiển thị công khai.