[ Blog ]在 Blogger中加入程式碼 - 使用 Google Code Prettifier

這是一個由 Google釋放出來的 CDN，可以在 Google的 GitHub上找到。

在管理頁面中的版面配置，點選新增小工具，新增 HTML/JavaScript。

將以下代碼貼到內容中就可以使用了。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;lang=basic&amp;lang=css&amp;lang=sql' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js' />
<script type='text/javascript'>
    $(&quot;pre&quot;).each(function(){
        $(this).addClass(&#39;prettyprint&#39;).addClass(&#39;linenums&#39;);
    });
</script>

使用方法如下

<pre class="prettyprint lang-javascript linenums"> 代碼 </pre>
or
<code class="prettyprint lang-javascript linenums"> 代碼 </code>

prettyprint：代碼將自動變得很漂亮：))
lang-javascript：選擇內文的語言，在 FAQ上有提到能支援的語言，範例使用的是 JavaScript。
linenums：會使各行程式碼開頭顯示行號。
linenums:12：linenums + 冒號 + 數字，將從該數字行號開始顯示。

預設代碼是每五行顯示一個數字，若要全部都顯示可以加入以下代碼。

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
</style>

若想特別標注某些代碼，可以使用原 PO代碼。 也可以標注代碼以外的地方。

<style>
.pre-highborder{
  border: 1px solid #ff0000;
  padding: 3px 3px 3px 0;
}
</style>

如下列範例

<pre class="prettyprint lang-python linenums:4">
from django.contrib.auth.models import User
from django.db import models
<span class="pre-highborder">from channels import Group</span>
import json
from datetime import datetime
</pre>

就會得到下面得效果了

from django.contrib.auth.models import User
from django.db import models
from channels import Group
import json
from datetime import datetime

若是要使用 HTML的代碼，稍微複雜一點。
需要將 < 改為 &lt; ， > 改為 &gt; 。
但有更方便的翻譯網站可以翻譯，勾選 Replace < > " 和 Escape special characters (& and non latin chars) 就好。
透過 Blogger編輯頁面也是以做到翻譯的效果，但因為 <br/>，相對會麻煩許多。

---

本文多是參考這裡。
為了開始用部落格寫筆記才特地去找的，尤其是沒注意到 HTML需要用特殊字符，在 HTML的代碼上花了一點時間，希望對要用部落的做筆記的朋友有綿薄的幫助。