Hướng dẫn highlight code trong Blogspot sử dụng highlight.js

Trong bài viết này chúng ta sẽ sử dụng highlight.js  để làm nổi bật các đoạn code lập trình mà ta trình bày trên blog.

Javascript example

var foo = 'Hello World!';
console.log('foo');

PHP example

$foo = 'Hello World!';
echo $foo;

HTML example

<h3 class="underline">Hello</h3>
<p>World!</p>

Bước 1: Lấy links hightlight.js:

Chúng ta sẽ sử dụng CDN links tại đây.

//cloudflare links
<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/default.min.css" rel="stylesheet"></link>

<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>

Bước 2: Thêm highlight vào template của blogspot:

Hướng dẫn highlight code trong Blogspot sử dụng highlight.js

Các bạn làm theo hình để vào phần chỉnh sửa HTML, copy và past đoạn CDN ở trên vào trước thẻ đóng của head </head> (bạn có thể tìm nhanh thẻ này bằng cách nhấn Ctrl+f  và nhập </head> để tìm)

Sau khi làm xong các bạn nhớ lưu lại.

Bước 3: Sử dung highlight trong bài đăng:

Để sử  dụng highlight.js trong bài viết, trong phần HTML của bài viết bạn tạo 2 thẻ pre <pre>hiển thị code </pre> sau đó vào phần viết past đoạn code cần hiển thị lên blog vào chỗ hiển thị code, sau đó cứ viết bài bình thường, khi viết xong trở lại phần HTML thêm cuối đoạn script sau:

<script>
//script initialisation for 'pre' tags
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
</script>

Thế là xong rồi code bạn sẽ được hiển thị khá đẹp trên bài viết, lưu ý: nếu bạn định highlight code HTML thì nhớ là thoát cái phần edit á HTML và chuyển qua phần viết bài bình thường nhá nếu không nó đọc lun code HTML đó thì sẽ không làm được.

Hiện nay highlight.js không thể chạy trên 1 số template của blogspot, nên nếu bạn không làm được thì bị dính những template đó rồi, bạn tìm thằng highlight khác thử.