如何在 Blogger 加入程式段落 Part 2: SyntaxHighLighter (連結至原作者的網頁空間)

緣起

由於前一篇仍有一些不是很圓滿的地方, 所以又找了一些資料, 發現 SyntaxHighlighter 似乎是一個不錯的選擇.
本篇是採用連結至原作者 (alex.gorbatchev) 網頁空間, 取得所需的 .css 及 .js 檔案.

步驟

1. 修改範本 Html, 加入以下程式段

 <!-- added by jasper (SyntaxHighLighter) -->
 <!-- 設定載入 shCore.css 與  shThemeDefault.css -->
    <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'/> 
 <!-- 設定需要載入的核心檔案 shCore.js -->
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
 <!-- 設定需要載入的程式語言檔案  -->
    <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/shBrushCss.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
 <!-- 設定啟用 highlighter   -->
    <script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
    SyntaxHighlighter.all();
    </script>

2. 修改本身的網頁, 利用 <pre class="brush: csharp;">

<pre class="brush: csharp;">
//
// POST: /Member/Create

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Member member)
{
    if (ModelState.IsValid)
    {
        db.Members.Add(member);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(member);
}
</pre>

以下為上述程式段落的執行結果

//
// POST: /Member/Create

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Member member)
{
    if (ModelState.IsValid)
    {
        db.Members.Add(member);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(member);
}

<pre class="brush: html;">
<html>
    <head>
    </head>
    <body>
        <h3> Hello, World </h3>
    </body>
</html>
</pre>

以下為上述程式段落的執行結果 (注意: Html 的內容必須先進行 Html Encoding

<html>
    <head>
    </head>
    <body>
        <h3> Hello, World </h3>
    </body>
</html>

總結

看來是一個比較好的程式碼段落工具, 但有一個問題, 上述的 Syntax HighLighter 的 <link>, <script> 裡面的 URL, 在實際瀏覽器檢視時, 都會變成 <script src="//alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
這也意味著, 如果是部落格主在進行網誌 [預覽] 時, 將會變成 HTTPS, 但上述連結 (alexgorbatchev.com), 沒有支援 SSL, 所以將無法呈現效果 ...

傑士伯的IT學習之路

2014年7月23日星期三