Lượt xem 0 Nhận xét

Cài đặt Syntax highlight có số dòng cho code trên blogger

Cập nhật: 28 thg 12, 2017 9:14 SA
Nếu bạn tìm Google về cách cài đặt Syntax Highlight cho blogger thì sẽ thấy rất nhiều bài viết hướng dẫn rồi. Nhưng hôm nay mình vẫn viết lại chủ đề này một lần nữa vì những bài viết mình tìm được đều đã được viết từ rất lâu,... dẫn đến việc những bài viết này đều đã lỗi thời, hỏng các liên kết, hình ảnh trong bài,... hoặc khi làm theo thì đều có lỗi.


Sau một hồi tìm kiếm mình chuyển sang tìm các trang nước ngoài thì cuối cùng cũng tìm được cách cài Syntax highlight có số dòng cho code trên blogger mà không bị bất cứ một lỗi gì cả.

Và với cách làm bên dưới đây, Highlight hoạt động trên cả Http và Https.

Việc cài đặt thì rất đơn giản, chúng ta sẽ dùng Java Script được cung cấp miễn phí bởi trang Alexgorbatchev.com.

Đầu tiên, các bạn vào phần chỉnh sửa template, sau đó dán đoạn code sau vào ngay trên </head> :

<!-- Highlight Code -->
<link href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js" type="text/javascript" />
<link href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.config.clipboardSwf = "http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/clipboard.swf";
 SyntaxHighlighter.all();
</script>

Code bên trên là cài đặt theme shThemeDefault.css. Demo cho theme này là đoạn code bên trên. Nếu không thích theme này các bạn có thể xem demo theme và chọn theme khác ở trang này : Theme

Khi chọn theme khác, bạn chỉ cần copy tên theme mình muốn và thay vào "shThemeDefault.css" ở link trong code bên trên.

Tiếp theo, các bạn cần chèn thêm file js hỗ trợ cho ngôn ngữ lập trình bạn sử dụng trong bài viết của mình, dưới đây là các ngôn ngữ lập trình mà trang Alexgorbatchev.com đang hỗ trợ.

<!-- Action Script 3  -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushAS3.js" type="text/javascript" />

<!-- Bash/Shell -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js" type="text/javascript" />

<!-- Cold Fusion -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushColdFusion.js" type="text/javascript" />

<!-- C# -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCSharp.js" type="text/javascript" />

<!-- C++ -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js" type="text/javascript" />

<!-- CSS -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js" type="text/javascript" />

<!-- Delphi -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDelphi.js" type="text/javascript" />

<!-- Diff -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDiff.js" type="text/javascript" />

<!-- Erlang -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushErlang.js" type="text/javascript" />

<!-- Groovy -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushGroovy.js" type="text/javascript" />

<!-- JavaScript -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js" type="text/javascript" />

<!-- JavaFX -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJavaFX.js" type="text/javascript" />

<!-- Perl -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js" type="text/javascript" />

<!-- PHP -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js" type="text/javascript" />

<!-- Plain Text -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js" type="text/javascript" />

<!-- Power Shell -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPowerShell.js" type="text/javascript" />

<!-- Python -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPython.js" type="text/javascript" />

<!-- Ruby -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushRuby.js" type="text/javascript" />

<!-- Scala -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushScala.js" type="text/javascript" />

<!-- SQL -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushSql.js" type="text/javascript" />

<!-- Visual Basic -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushVb.js" type="text/javascript" />

<!-- XML -->
<script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js" type="text/javascript" />



Bạn hãy chọn những ngôn ngữ lập trình mà mình hay dùng, sau đó chèn link tương ứng với ngôn ngữ lập trình đó ngay trên thẻ </head> (dưới đoạn code ban đầu và trên thẻ </head>). Không nên chèn tất cả vì điều này là không cần thiết và có thể làm chậm tốc độ tải trang của bạn.

Cách sử dụng Syntax HighLight trong bài viết :

- khi viết bài, các bạn hãy dán đoạn code cần HighLight vào phần viết (Không phải phần viết html).

- Sau đó chuyển sang tab viết html, vào chèn <pre class="brush: tên-ngôn-ngữ-lập-trình"> vào ngay trên đoạn code cần tạo highlight và </pre> ngay dưới đoạn code này.

Ví dụ :

<pre class="brush: java">
Đoạn code bằng ngôn ngữ java của bạn
</pre>



Demo thì chính là các đoạn code được highlight trong bài viết này rồi.

Chúc các bạn thành công. Nếu cần trợ giúp gì thì các bạn có thể comment bên dưới bài viết này.