Syntax Highlighter Shortcode cho Blogger

Syntax Highlighter Shortcode For Blogger

• DEMO

Cách thực hiện

1. Cài đặt Plugin Blogger Shortcode

Để sử dụng Syntax Highlighter Shortcode trước tiên bạn phải cài đặt Plugin Shortcode cho Blogger của bạn bằng cách làm theo các bước được chia sẻ qua bài viết dưới đây:

Giới thiệu Plugin Blogger Shortcode

2. Thêm Syntax Highlighter vào Blogger

1 Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code sau trước thẻ </head>

 <!--SYNTAX HIGHLIGHTER BY Iris Tips STARTS--> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;; 
SyntaxHighlighter.all(); 
</script> 
<!--SYNTAX HIGHLIGHTER BY Iris Tips ENDS--> 

2 Lưu Template của bạn lại.

Tùy chỉnh: Sửa đoạn code

 <link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>  

thành

 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/> 

Nếu bạn muốn thay theme trắng mặc định thành theme Grey.

3. Cách sử dụng Syntax Highlighter

1 Đầu tiên phải Encode code của bạn bằng cách sử dụng công cụ HTML Encoder

2 Tiếp theo để hiển thị shortcode bạn cần viết theo cú pháp sau

 [code]Thêm Code Đã Encode Tại Đây[/code] 

Tùy chỉnh: Nếu bạn muốn làm nổi bật dòng code nào thì cần xác định hàng của dòng code đó và đặt trong thuộc tính hl
Ví dụ muốn làm nổi bật dòng 1, 4 và 7

 [code hl="1, 4, 7"]Thêm Code Đã Encode Tại Đây[/code] 

Kết quả:

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by MBT/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm