Viết code lên Blog dùng highlight.js

Đôi khi bạn muốn đưa một đoạn code lên trên blog của mình. Highlight.js giúp bạn format màu sắc của đoạn code của bạn cho việc xem code dễ dàng hơn như hình bên là một đoạn xml. Bài viết này hướng dẫn bạn dùng thư viện Hightlight.js cho blog của mình.

Bước 1: Thêm thư viện

1. Bạn vào Mẫu => Chỉnh sửa HTML.
2. Thêm đoạn code sau vào sau thẻ title

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'/>

Lưu mẫu lại:

Bước 2: Trình bày trong bài viết

Bạn chuyển qua viết bài dưới dạng HTML, thêm vào đoạn script sau :

<script>hljs.initHighlightingOnLoad();</script>

Nội dung bạn viết vào trong đoạn mã thay cho dấu 3 chấm (...) :

<pre><code class="html">...</code></pre>

Đối với trường hợp code của bạn là html hoặc xml bạn dùng trang này để encode trước khi bạn đưa vào dấu 3 chấm.

Chúc bạn một ngày vui vẻ.