[Blogger] Tích hợp SyntaxHighlighter vào blogspot

Trong quá trình lướt web, chắc hẳn bạn đã từng gặp 1 số trang mà họ trình bày 1 đoạn mã rất đẹp, có đánh số thứ tự và màu sắc nổi bật hơn hẳn những đoạn văn khác trong bài viết. SyntaxHighlighter là từ khóa mà bạn cần tìm kiếm.

SyntaxHighlighter là một mã khép kín với đầy đủ chức năng được phát triển trên JavaScript bởi Alex Gorbatchev năm 2004. Tính năng này giúp giảm bớt phải viết bằng một ngôn ngữ đánh dấu (markup language) để làm nổi bật một đoạn code. Highlighting không ảnh hưởng đến ý nghĩa của các văn bản gốc, nó chỉ dành cho nguời đọc dễ dàng đọc nội dung code, và các biên tập viên viết bài.

Lấy ví dụ đơn giản 1 đoạn code khi trình bày thông thường

/***********************************
 ** Multiline block comments
 **********************************/
  
$stringWithUrl = "http://alexgorbatchev.com";
$stringWithUrl = 'hello world';
  
ob_start("parseOutputBuffer");      // Start Code Buffering
session_start();
  
function parseOutputBuffer($buf) {
    global $portal_small_code, $portal_gzcompress;
    global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
  
    // cleaning out the code.
    if($portal_small_code && !$portal_gzcompress) {
        $buf = str_replace("    ", "", $buf);
        $buf = str_replace("\n", "", $buf);
        $buf = str_replace(chr(13), "", $buf);
    }
}

Khi trình bày qua SyntaxHighlighter
 DEMO
Rất đẹp và chuyên nghiệp đúng không. Vậy hãy theo chỉ dẫn sau để tô điểm cho bài đăng của bạn. Đầu tiên bạn hãy xem qua bảng này, chốc nữa tôi sẽ hướng dẫn bạn get link script

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

Như thường lệ bạn đăng nhập vào trang quản trị blog của mình và vào mục chỉnh sửa HTML.

Truy cập trang http://alexgorbatchev.com/SyntaxHighlighter để lấy phiên bản mới nhất. Tại thời điểm viết bài thì là 3.0.83

B1: Bạn dán code bắt buộc sau vào trước thẻ </head>

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

Nhìn link và phiên bản thì chắc bạn cũng đoán được phải làm gì khi có version mới rồi đúng không.

B2: Tiếp theo, bạn sẽ lựa chọn những ngôn ngữ mà thường xuyên hay dùng để viết bài ở bảng trên, lấy tên file của nó ở cột thứ 3 và ghép với phiên bản để tạo ra mã nhúng có dạng

<script src='http://agorbatchev.typepad.com/pub/sh/version/scripts/filename.js' type='text/javascript'/>

Ví dụ như tôi thường sử dụng javascript và xml để viết bài thì chỉ cần nhúng 2 link sau

<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/>

Tùy vào sở thích của bạn mà có thể nhúng ít/nhiều theo nhu cầu.

B3: Cuối cùng bật SyntaxHighlighter bằng đoạn mã

<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>

Thứ tự đặt code đúng như 3 bước nhé, bạn chớ đổi thứ tự tránh lỗi phát sinh

B4: Khi viết bài có đoạn code cần làm nổi bật bạn chuyển chế độ HTML và dán đoạn code tương tự như sau

<pre class="brush:Brush aliases">
<!-- Viết code vào đây -->
</pre>

Trong đó Brush aliases bạn lấy ở cột số 2 của bảng trên. Thẻ pre sẽ giữ nguyên định dạng đoạn code của bạn. Như vậy ví dụ như tôi đã tích hợp Brush name = XML thì code khi viết bài có thể là

<pre class="brush:xml">
<!-- Viết code vào đây -->
</pre>

hoặc

<pre class="brush:html">
<!-- Viết code vào đây -->
</pre>

Đều đúng ! Trong trường hợp bạn chưa tích hợp (Bước 2) mà đã gọi thì sẽ gặp thông báo lỗi

Bạn cần tích hợp nó vào hoặc thay đổi Brush aliase không cứ vào bài viết là sẽ có bảng alert thông báo nhé !

Như vậy qua bài viết này lại có thêm 1 thủ thuật giúp blog của bạn trở nên chuyên nghiệp hơn rồi. Chúc bạn thành công và đừng quên để lại bình luận nếu chưa làm được !