Hướng dẫn thêm Syntax Highlightjs cho Blogger

Thông thường, những đoạn code khi được chia sẻ thường có cùng một màu giống như những đoạn text bình thường, dẫn tới việc người đọc sẽ khó khăn khi phân tích đoạn code đó. Để giải quyết vấn đề này, trên mạng internet cũng chia sẻ rất nhiều phương pháp để giúp ta đánh dấu, bôi màu riêng biệt cho từng kiểu ngôn ngữ (như xml, javascript...) có trong đoạn code.

Bài viết này sẽ hướng dẫn cài đặt Highlightjs cho Blogspot, đây là một plugin khá gọn nhẹ, giúp chúng ta thêm vào những màu sắc đặc trưng cho từng kiểu mã, nó hỗ trợ tới 162 ngôn ngữ lập trình và có 74 kiểu để bạn lựa chọn.

Bước 1

Lựa chọn kiểu, vào trang web demo để lựa chọn kiểu ưng ý

Sau khi chọn xong, truy cập vào trang này để lấy file .CSS theo từng style

Sau đó chèn đoạn CSS vào template, để trước thẻ </style> hoặc ]]></b:skin>. Ví dụ như

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
CSS của style được chọn...
/*]]>*/
</style>
</b:if>

Bước 2

Copy đoạn code bên dưới và chèn vào trước thẻ </body> trong template

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/duczone/public-javascript/master/highlightv9-5-0.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Lưu template lại. Bây giờ khi viết bài, ta có thể làm đẹp cho đoạn code bằng cách đặt chúng trong thẻ:

<pre><code>
Đoạn Code cần làm đẹp (sau khi được chuyển đổi mã HTML)
</code></pre>

Chú ý là đoạn code phải được chuyển đổi mã HTML, bạn có thể thực hiện tại đây