[Tip] Tích hợp SyntaxHighlighter vào Blogspot

Nếu bạn là một developer hay 1 coder và muốn chia sẻ những dòng code cho mọi người trên website, blog của bản thân nhưng gặp trở ngại khi chúng chỉ đơn thuần là những dòng text "đen xì". Điều này làm cho người đọc gặp khó khăn trong việc đọc và hiểu code. Để việc đọc chúng trở lên dễ dàng hơn ta cần làm nổi bật cú pháp của chúng.

using System;

namespace HelloWorld
{
    class Hello
    {
        public static void Main(String[] args)
         {
             Console.WriteLine("Hello World");
         }
    }
}

Có rất nhiều thư viện javascript cho phép chúng ta làm điều đó. Bây giờ tôi sẽ giới thiệu cho bạn 1 cách được trình bày ở dưới đây.

Đầu tiên: Đăng nhập vào Blogger, chọn Template > Edit HTML

Tiếp theo: Chèn đoạn link thư viện SyntaxHighlighter online Style, Script dưới đây trước thẻ </head>

<!-- INCLUDE SyntaxHighlighter Components (css and javascript) -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- END INCLUDE SyntaxHighlighter Components -->

<!-- INCLUDE YOUR BRUSHES WHICH YOU WANT TO USE HERE -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- END INCLUDE BRUSHES -->
<!-- INIT SyntaxHighlighter -->
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>
<!-- END INIT SyntaxHighlighter -->

Nếu đường link không còn tồn tại, bạn có thể up file SyntaxHighlighter lên trang github  rồi direct link js và stylesheet vào <Link> và <Script> như trên .

Up file SyntaxHighlighter lên git như sau:

Chọn file js hay css cần thiết...Sau đó chọn Raw

Ta có được đường link js và js cần thiết.

[Giải thích] Nếu bạn chỉ dùng SyntaxHighlighter cho C++, C#, HTML,XML code thì chúng ta chỉ sử dụng một các thư viện dưới đây

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCsharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

Bạn có thể thêm các thư viện cho các ngôn ngữ khác cực kì đơn giản bằng các thay thế shBrushXXX.js (trong đó XXX là tên ngôn ngữ lập trình khác) 

Cuối cùng: Khi muốn làm "nổi" cú pháp cho các đoạn code của mình ta chỉ việc thay thế tên class  phù hợp với ngôn ngữ mà bạn muốn chèn.

<pre class="brush:csharp">using System;

namespace HelloWorld
{
    class Hello
    {
        public static void Main(String[] args)
         {
             Console.WriteLine("Hello World");
         }
    }
}
</pre>

Hy vọng nó sẽ giúp ích cho mọi người, thân !!!