Tạo khung code nhiều màu sắc bằng cách sử dụng Highlight Js

Có thể bạn thích

Những người viết blog là một lập trình viên hay những người hay chia sẻ thủ thuật liên quan đến code thường rất hay phải viết trực tiếp code lên bài viết. Do đó, việc tạo một khung code là một điều khá quan trọng. Để đáp ứng cho việc đọc code một cách thuận tiện hơn cho người xem, mỗi keyword trong một ngôn ngữ lập trình sẽ có màu khác nhau để người đọc dễ phân biệt, mặc khác cũng làm cho blog trở nên chuyên nghiệp hơn.
Hôm nay mình giới thiệu với các bạn về Highlight Js, thứ sẽ giúp bạn làm được điều đó.

Cài đặt Highlight Js vào Blog

Code Js

Đầu tiên, bạn cần chèn đoạn JS sau vào trước thẻ </head>

<link href='//highlightjs.org/static/demo/styles/hybrid.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>

Cách sử dụng

Để sử dụng, bạn thực hiện chèn code vào trong thẻ <pre class="<custom>">...</pre>, <custom> là nơi bạn tùy chỉnh ngôn ngữ mà bạn chèn, giả sử bạn muốn chèn code C# vào trong blog, bạn tùy chỉnh thành <pre class="cs">...</pre>

<pre class="cs">
   // Your code is right here!
</pre>

HTML

<pre class="html">
   // Your code is right here!
</pre>

CSS

<pre class="css">
   // Your code is right here!
</pre>

JavaScript

<pre class="javascript">
   // Your code is right here!
</pre>

Bạn có thể tìm thêm nhiều ngôn ngữ tại: HighLight Js

Một số tùy biến khác

Ngoài ra bạn có thể thay đổi theme cho khung code, bằng cách thay đổi đường link trong code Js phía trên, dưới đây là một số style mà mình thích:

Agate

<link href='//highlightjs.org/static/demo/styles/agate.css' rel='stylesheet'/>

AndroidStudio

<link href='//highlightjs.org/static/demo/styles/androidstudio.css' rel='stylesheet'/>

Atelier Cave Dark

<link href='//highlightjs.org/static/demo/styles/atelier-cave-dark.css' rel='stylesheet'/>

Atelier Cave Light

<link href='//highlightjs.org/static/demo/styles/atelier-cave-light.css' rel='stylesheet'/>

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