Tạo hiệu ứng highlight làm đẹp code cho blogspot, website

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML

Bước 2: Tìm kiếm thẻ sau (Ctrl + F):

</head>

Và chèn code sau vào trước thẻ </head>

1 2 3 4 5 6 7 8 9 10 11

<!-- Highlighter jakub-bb.net --> <script src="https://jakub-bb-net.googlecode.com/svn/trunk/highlight/scripts/shCore.js" type="text/javascript"></script> <!-- Style Code --> <link href="https://jakub-bb-net.googlecode.com/svn/trunk/highlight/styles/shCoreDefault.css" rel="stylesheet" type="text/css"> <!-- Hỗ trợ ngôn ngữ --> <script src="https://jakub-bb-net.googlecode.com/svn/trunk/highlight/scripts/shBrushJScript.js" type="text/javascript"></script> <script src="https://jakub-bb-net.googlecode.com/svn/trunk/highlight/scripts/shBrushCss.js" type="text/javascript"></script> <script src="https://jakub-bb-net.googlecode.com/svn/trunk/highlight/scripts/shBrushXml.js" type="text/javascript"></script> <script type="text/javascript">SyntaxHighlighter.all();</script> <!-- End Highlighter jakub-bb.net -->

Bước 3: Khi post bài các bạn chuyển sang tab HTML và post có dạng sau:

<pre class="brush: js; highlight: [1]">Code của bạn</pre>

Trong đó:
js là code javascript
Code html thì bạn post:

<pre class="brush: html;">Code của bạn</pre>

Code css thì bạn post:

<pre class="brush: css;">Code của bạn</pre>

highlight: [1] là tô màu cho dòng số một. Nếu bạn muốn dòng số 10 được tô đậm thì chèn thêm highlight: [10] vào trong thẻ class. 

Trên đó mình chỉ thêm 3 ngôn ngữ HTML, CSS, JS. Nếu các bạn cần highlight của ngôn ngữ nào nữa thì comment để mình update link js ngôn ngữ đó lên bài viết nhé.

Đây là SyntaxHighlighter @version 3.0.83 .

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

theo:www.jakub-bb.net